vue项目在安卓5系统兼容性问题;解决vue项目在安卓5系统白屏问题
解决vue项目在安卓5系统白屏问题,把项目中的es6及更高的语法转化为es5。
·
解决vue项目在安卓5系统白屏问题,把项目中的es6及更高的语法转化为es5
先引入依赖包
npm install @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-plugin-transform-remove-console babel-polyfill es6-promise --S
1、新建.babelrc
文件
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"ie": 10
}
}
]
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
2、修改babel.config.js
文件
module.exports = {
presets: [
[
"@vue/app",
{
"useBuiltIns": "entry",
polyfills: [
'es6.promise',
'es6.symbol',
"es6.array.iterator",
"es6.object.assign",
"es6.let",
"es6.const",
"es6.class",
"es6.function"
]
}
]
]
};
+};
3、修改vue.config.js
文件
function resolve(dir) {
return path.join(__dirname, '.', dir);
}
module.exports = {
transpileDependencies: [],
chainWebpack: config => {
// 入口文件转化为es5
config.entry.app = ['babel-polyfill', './src/main.js'];
config.module.rule('compile')
.test(/\.js$/)
.include
.add(resolve('src'))
.add(resolve('node_modules')) // node_modules文件都转化为es5语法
// .add(resolve('vue-awesome-swiper'))
.end()
.use('babel')
.loader('babel-loader')
.options({
presets: [
['@babel/preset-env', {
modules: false
}]
]
});
},
}
4、main.js
文件中引入依赖包
import 'babel-polyfill'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
以上操作,基本就把打包后的文件都转为es5语法了。
但是,在我的项目中,依然还存在白屏的问题,最后发现,注释掉main.js
引入的vconsole包和初始化方法,白屏问题就解决了,真的是无语。
更多推荐
已为社区贡献2条内容
所有评论(0)