详解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 相关文章推荐
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
最简单的tab切换实例代码
May 13 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
Python微信库:itchat的用法详解
2017/08/14 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
python如何爬取个性签名
2018/06/19 Python
python生成特定分布数的实例
2019/12/05 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python对文件的操作方法汇总
2020/02/28 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
班级寄语大全
2014/04/10 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
实习推荐信格式模板
2015/03/27 职场文书
物业保安辞职信
2015/05/12 职场文书
证婚人致辞精选
2015/07/28 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js