详解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 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 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设计模式 Factory(工厂模式)
2011/06/26 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
Laravel5中contracts详解
2015/03/02 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
JS中的三个循环小结
2017/06/20 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
js仿360开机效果
2019/12/26 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python中 map()函数的用法详解
2018/07/10 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python实现列表的排序方法分享
2019/07/01 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
优秀党支部书记事迹材料
2014/05/29 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
远程教育学习心得体会
2016/01/23 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python