详解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中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
Jquery ajax基础教程
Nov 20 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 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
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
php实现的用户查询类实例
2015/06/18 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python异常学习笔记
2015/02/03 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
python语言中with as的用法使用详解
2018/02/23 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
python实现超级玛丽游戏
2020/03/18 Python
Python request使用方法及问题总结
2020/04/26 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
关于诚信的活动方案
2014/08/18 职场文书
公司介绍信范文
2015/01/31 职场文书
公司开业主持词
2015/07/02 职场文书
家电创业计划书
2019/08/05 职场文书
golang内置函数len的小技巧
2021/07/25 Golang