详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决


Posted in Javascript onApril 14, 2019

最近遇到一个问题,用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了。

低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性,所以报错。但在手机上调试不方便,受一篇文章的启发, IE 浏览器也是同样的问题,所以可以在 IE 上调试,一个调好了两个就都好了。突然发现万恶的 IE 还是有点用的…

网上的文章大部分是 Vue-cli 2.x 版本的解决方案,但 Vue-cli 3 跟之前的版本还是有很大差异的,可能是我比较菜,看了 n 篇文章还是不知道怎么配置。经过努力,终于梳理出了基于 Vue-cli 3 的项目如何做兼容性配置的步骤:

1. 根目录下新建 .babelrc 文件

在项目根目录下新建 .babelrc 文件,跟 package.json 同级。 将以下代码复制到 .babelrc 文件中

{
 "presets": ["@babel/preset-env"],
 "plugins": [
  "@babel/plugin-transform-runtime"
 ]
}

2. 修改 babel.config.js

将以下代码复制到 babel.config.js 文件中,其中最上面四行是打包时删除 console 的配置,如不需要可以删除。

const plugins = [];
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-cli 3 新建项目时,默认是没有这个配置文件的,没有则在项目根目录下新建一个 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';
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

5. 安装依赖

在根目录下执行以下语句。如果在第二步不需要配置生产环境删除 console 可以不要最后一个 babel-plugin-transform-remove-console 。

npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill babel-plugin-transform-remove-console

以上五步配置完就可以解决 Vue 项目在低版本安卓系统和 IE 浏览器下显示空白的问题了。

附完整的 vue.config.js

const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(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);
  //修复 Lazy loading routes Error
  config.plugin('html').tap(args => {
   args[0].chunksSortMode = 'none';
   return args;
  });
  // 添加别名
  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) {
   const plugins = [];
   //开启 gzip 压缩
   plugins.push(
    new CompressionWebpackPlugin({
     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: {}

};

这里引了几个依赖,如果运行报错则根据提示安装相应依赖即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 #Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 #Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 #Javascript
JS实现马赛克图片效果完整示例
Apr 13 #Javascript
ES6入门教程之let、const的使用方法
Apr 13 #Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 #Javascript
微信小程序template模版的使用方法
Apr 13 #Javascript
You might like
图象函数中的中文显示
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
python自带的http模块详解
2016/11/06 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python并发编程之线程实例解析
2017/12/27 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
如何在Django项目中引入静态文件
2019/07/26 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
质量工程师岗位职责
2013/11/16 职场文书
保护地球的标语
2014/06/17 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
2015年新农合工作总结
2015/03/30 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis