详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
最近遇到一个问题，用Vue开发的项目在最近两年新出的安卓手机上没问题，在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因，目前已知的是Android6.0以上都OK，6.0以下就不行了。
低版本安卓系统内置的webview不支持ES6语法等一些新特性，所以报错。但在手机上调试不方便，受一篇文章的启发，IE浏览器也是同样的问题，所以可以在IE上调试，一个调好了两个就都好了。突然发现万恶的IE还是有点用的…
网上的文章大部分是Vue-cli2.x版本的解决方案，但Vue-cli3跟之前的版本还是有很大差异的，可能是我比较菜，看了n篇文章还是不知道怎么配置。经过努力，终于梳理出了基于Vue-cli3的项目如何做兼容性配置的步骤：
1.根目录下新建.babelrc文件
在项目根目录下新建.babelrc文件，跟package.json同级。将以下代码复制到.babelrc文件中
{
"presets":["@babel/preset-env"],
"plugins":[
"@babel/plugin-transform-runtime"
]
}
2.修改babel.config.js
将以下代码复制到babel.config.js文件中，其中最上面四行是打包时删除console的配置，如不需要可以删除。
constplugins=[];
if(['production','prod'].includes(process.env.NODE_ENV)){
plugins.push("transform-remove-console")
}
module.exports={
presets:[
[
"@vue/app",
{
"useBuiltIns":"entry",
polyfills:[
'es6.promise',
'es6.symbol'
]
}
]
],
plugins:plugins
};
3.修改vue.config.js
用vue-cli3新建项目时，默认是没有这个配置文件的，没有则在项目根目录下新建一个vue.config.js，也是跟package.json同级。
解决白屏问题需要添加的代码：
module.exports={
transpileDependencies:['webpack-dev-server/client'],
chainWebpack:config=>{
config.entry.app=['babel-polyfill','./src/main.js'];
}
}
4.修改main.js文件
找到项目根目录/src/main.js，添加以下代码
import'@babel/polyfill'; importEs6Promisefrom'es6-promise' Es6Promise.polyfill()
5.安装依赖
在根目录下执行以下语句。如果在第二步不需要配置生产环境删除console可以不要最后一个babel-plugin-transform-remove-console。
npminstall--save-dev@babel/core@babel/plugin-transform-runtime@babel/preset-enves6-promisebabel-polyfillbabel-plugin-transform-remove-console
以上五步配置完就可以解决Vue项目在低版本安卓系统和IE浏览器下显示空白的问题了。
附完整的vue.config.js
constpath=require('path')
constresolve=dir=>path.resolve(__dirname,dir)
constIS_PROD=['production','prod'].includes(process.env.NODE_ENV)
constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
constCompressionWebpackPlugin=require('compression-webpack-plugin');
constproductionGzipExtensions=/\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports={
transpileDependencies:['webpack-dev-server/client'],
//基本路径
//baseUrl:'./',
publicPath:'./',
//输出文件目录
outputDir:'dist',
//eslint-loader是否在保存的时候检查
lintOnSave:false,
assetsDir:'',//相对于outputDir的静态资源(js、css、img、fonts)目录
runtimeCompiler:true,//是否使用包含运行时编译器的Vue构建版本
//生产环境是否生成sourceMap文件
productionSourceMap:false,
chainWebpack:config=>{
config.entry.app=['babel-polyfill','./src/main.js'];
//修复HMR
config.resolve.symlinks(true);
//修复LazyloadingroutesError
config.plugin('html').tap(args=>{
args[0].chunksSortMode='none';
returnargs;
});
//添加别名
config.resolve.alias
.set('@',resolve('src'))
.set('assets',resolve('src/assets'))
.set('components',resolve('src/components'))
.set('layout',resolve('src/layout'))
.set('base',resolve('src/base'))
.set('static',resolve('src/static'));
//压缩图片
config.module
.rule("images")
.use("image-webpack-loader")
.loader("image-webpack-loader")
.options({
mozjpeg:{progressive:true,quality:65},
optipng:{enabled:false},
pngquant:{quality:"65-90",speed:4},
gifsicle:{interlaced:false},
webp:{quality:75}
});
//打包分析
if(process.env.IS_ANALYZ){
config.plugin('webpack-report')
.use(BundleAnalyzerPlugin,[{
analyzerMode:'static',
}]);
}
},
configureWebpack:config=>{
if(IS_PROD){
constplugins=[];
//开启gzip压缩
plugins.push(
newCompressionWebpackPlugin({
filename:'[path].gz[query]',
algorithm:'gzip',
test:productionGzipExtensions,
threshold:10240,
minRatio:0.8
})
);
config.plugins=[
...config.plugins,
...plugins
];
}
},
//css相关配置
css:{
extract:true,
sourceMap:false,
loaderOptions:{},
modules:false
},
parallel:require('os').cpus().length>1,
pwa:{},
devServer:{
open:process.platform==='darwin',
host:'0.0.0.0',
port:8080,
https:false,
hotOnly:false,
proxy:null,//设置代理
before:app=>{
}
},
//第三方插件配置
pluginOptions:{}
};
这里引了几个依赖，如果运行报错则根据提示安装相应依赖即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。