最近遇到一个问题,用Vue开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0以上都好,6.0以下就不行了。
低版本安卓系统内置的webview不支持ES6语法等一些新特性,所以报错。但在手机上调试不方便,受一篇文章的启发,即浏览器也是同样的问题,所以可以在IE上调试,一个调好了两个就都好了。突然发现万恶的IE还是有点用的…
网上的文章大部分是Vue-cli 2。x版本的解决方案,但Vue-cli 3跟之前的版本还是有很大差异的,可能是我比较菜,看了n篇文章还是不知道怎么配置。经过努力,终于梳理出了基于Vue-cli 3的项目如何做兼容性配置的步骤:
在项目根目录下新建.babelrc文件,跟包。json同级。将以下代码复制到.babelrc文件中
{
“预设”:“@babel/preset-env”,
“插件”:(
“@babel/plugin-transform-runtime”
]
}
之前
将以下代码复制到babel.config。js文件中,其中最上面四行是打包时删除控制台的配置,如不需要可以删除。
const插件=[];
如果((“生产”、“刺激”)其中包括(process.env.NODE_ENV)) {
plugins.push (“transform-remove-console”)
}
模块。出口={
预设:[
(
“@vue/应用程序”,
{
“useBuiltIns”:“入口”,
polyfills:(
“es6.promise”,
“es6.symbol”
]
}
]
),
插件:插件
};
之前
用vue-cli 3新建项目时,默认是没有这个配置文件的,没有则在项目根目录下新建一个vue.config。js,也是跟包。json同级。
解决白屏问题需要添加的代码:
模块。出口={
transpileDependencies:(“webpack-dev-server/客户端”),
chainWebpack:配置=比;{
config.entry。应用=[' babel-polyfill ', '。/src/main.js '];
}
}
之前
找到项目根目录/src/主要。js,添加以下代码
进口“@babel/polyfill”;
从“es6-promise”进口Es6Promise
Es6Promise.polyfill ()
之前
在根目录下执行以下语句。如果在第二步不需要配置生产环境删除控制台可以不要最后一个babel-plugin-transform-remove-console。
npm安装——save-dev @babel/核心@babel plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill babel-plugin-transform-remove-console
以上五步配置完就可以解决Vue项目在低版本安卓系统和IE浏览器下显示空白的问题了。
const path=要求(“路径”)
const解决=dir=比;路径。解决(__dirname dir)
const IS_PROD=[‘生产’,‘刺激’]其中(process.env.NODE_ENV)
const BundleAnalyzerPlugin=要求(webpack-bundle-analyzer) .BundleAnalyzerPlugin;
const CompressionWebpackPlugin=要求(“compression-webpack-plugin”);
const productionGzipExtensions=/\。(js html css json | txt | | | | ico | svg)(\ & # 63;。*) & # 63;美元/我;
模块。出口={
transpileDependencies:(“webpack-dev-server/客户端”),//基本路径//baseUrl:“。/?
publicPath:“。/?/输出文件目录
outputDir:“距离”,//eslint-loader是否在保存的时候检查
lintOnSave:假的,
assetsDir:“,//相对于outputDir的静态资源(js、css、img、字体)目录
runtimeCompiler:真的,//是否使用包含运行时编译器的Vue构建版本//生产环境是否生成sourceMap文件
productionSourceMap:假的,
chainWebpack:配置=比;{
config.entry。应用=[' babel-polyfill ', '。/src/main.js '];//修复HMR
config.resolve.symlinks(真正的);//修复延迟加载的路线错误
config.plugin (html)。水龙头(args=比;{
args [0]。chunksSortMode='没有';
返回参数;
});//添加别名
config.resolve.alias
这里(‘@’,解决(src))
这里(“资产”,解决(src/资产))
这里(“组件”,解决(src/组件))
这里(“布局”,解决(src/布局))
这里(“基地”,解决(src/基地))
这里(“静态”,解决(src/静态的));//压缩图片
config.module
.rule(“图片”)
.use (“image-webpack-loader”)
.loader (“image-webpack-loader”)
.options ({
mozjpeg:{进步:真的,质量:65},
optipng:{启用:假},
pngquant:{质量:“65 - 90”,速度:4},
gifsicle:{交错:假},
webp:{质量:75}
});//打包分析
如果(process.env.IS_ANALYZ) {
config.plugin (“webpack-report”)
.use (BundleAnalyzerPlugin [{
analyzerMode:“静态”,
}));
}
}，
configureWebpack:配置=比;{
如果(IS_PROD) {
const插件=[];//开启gzip压缩
plugins.push (
新CompressionWebpackPlugin ({
文件名:“(路径). gz和[查询]”,
算法:gzip,
测试:productionGzipExtensions,
阈值:10240
minRatio: 0.8
})
);
配置。插件=[
……config.plugins,
插件…
];
}
}，//css相关配置
css: {
精华:没错,
sourceMap:假的,
loaderOptions: {},
模块:假
}，
并行:要求(os) .cpus ()。长度比;1，
pwa: {},
devServer: {
开放:过程。平台===按锒摹?
主持人:“0.0.0.0”,
端口:8080
https:假的,
紧随:假的,
代理:null,//设置代理
:应用=比;{
}
}，//第三方插件配置
pluginOptions: {}
