Vue 2.0+Vue-cli+swiper项目在安卓5.1上白屏的问题

参考博客1
参考博客2
这个问题的前提是版本1已经修复了vue2.0在安卓4.4白屏的问题，已经兼容了es6.如果还没解决es6的兼容性问题，需要结合这篇博客

1.解决方法

方法1
引入的时候看下是不是这么引入的，如果不是就修改下
import Swiper from 'swiper/dist/js/swiper.min.js';
为什么这么改一下能好呢，因为swiper.min.js是编译好的兼容es6的版本，而import Swiper from swiper加载的是swiper.esm.bundle.js，这个文件，不在webpack配置，是有兼容性问题的，在ie9-10和低版本安卓手机都会复现。
方法2
vue-cli2开发项目：
修改 webpack.base.conf.js：

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'),resolve('node_modules/swiper/dist/js'),resolve('node_modules/dom7/dist')]
      },

vue-cli3开发项目：
新增vue.config.js文件在项目根目录

module.exports = {
  chainWebpack: config => {
    config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)
  }
}

方法3
在update生命周期函数中初始化new Swiper函数。
这个是之前遇到的，在开发时就发现解决的。

2.测试方法

因为是在安卓5.1手机上发现的白屏问题，测试会不那么方便，这里推荐使用ie9-10浏览器测试，不白屏了就是修复了。
不过这里有个问题就是解决方法2只在编译后生效，解决方法1编译前编译后都生效。推荐方法1，并且以后引入这种项目，都采用这种方式引入，可以减少问题复发。

感兴趣可以往下看看解决思路

3.解决思路

遇到这种控制台不会报错的问题，不知道怎么去找解决方法，只能直接谷歌查，一开始思路不对，直接查vue2 在安卓低版本手机上白屏，不过当时看到一个点，觉得应该和我是同一个问题，就是swiper在vue js babel-loader的解析。

image.png

直接复制到自己项目，测试发现还是白屏，这时候，我以为觉得不是swiper的问题
又开始查vue2 的兼容性问题，然后开始安装不同的兼容插件，还下载低版本的webpack-dev-server@2.6.1，这个时候我在一篇博客上看到在ie9中测是一样的，就没有安装一个就去编译测试，毕竟vue-cli2编译很慢。然后发现ie控制台还是报错，我开始查SCRIPT1002: 语法错误的解决方法，再次安装一堆插件，安装时间还特别久，ie还是报错，不知道怎么解决了。
这时候后台同事问我，觉得应该是什么导致的，可以先确定下，把可能导致白屏的代码注释下测测。点醒我了，我感觉一直在瞎改，然后把swiper引入的代码注释，发现ie9控制台不报错，这时确定就是swiper的问题了，再看上面的vue.config.js，结合之前开发的vue-cli3项目，想到这个配置文件是配置vue-cli3的，我这个vue-cli2项目配置的不是这么改的。

image.png

一开始还是直接拿的上面博客的写法
webpack.base.conf.js：

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('/node_modules\\/(dom7|swiper)\\/.*/')]
      },

还是不行。我奔溃了，再想想只能自己写死了，不用这个正则的写法了。终于不报错了。这里还有个坑，就是编译之前，ie9还是报错的是白屏，编译后在测试服打开是好的。

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'),resolve('node_modules/swiper/dist/js'),resolve('node_modules/dom7/dist')]
      },

后台同事发给我一个博客的链接，还有个解决方法，试了下，简直是完美解决，开发模式ie9也不报错了

image.png

import Swiper from 'swiper/dist/js/swiper.min.js';

最后编辑于：2019.05.20 18:29:24