详解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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
生成二维码方法汇总
Dec 26 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 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
动易数据转成dedecms的php程序
2007/04/07 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
几种响应式文字详解
2017/05/19 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
TensorFlow损失函数专题详解
2018/04/26 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python基于内置函数type创建新类型
2020/10/22 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
如何开启linux的ssh服务
2015/02/14 面试题
自我评价200字分享
2013/12/17 职场文书
接受捐赠答谢词
2014/01/27 职场文书
上课玩手机检讨书
2014/02/08 职场文书
幼儿园家长评语
2014/02/10 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
第一节英语课开场白
2015/06/01 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL