vue + swiper 踩坑记实（dom7、es6）

现象：

在安卓低版本手机（版本5.1）上白屏问题，在问题机型后复现问题后发现报错。

image.png

找到对应的行发现：

let [t, n, r, i] = e

结论：解构赋值 ——> ES6 语法的兼容问题 ?!

但是很好奇这个是哪里的文件? 于是找了上下文。

最终找到了关键字：dom7

image.png

而 dom7 与 swiper4 的关系：

image.png

所以，原因就是： dom7 使用的是 es6 的语法，但是在使用过程中并没有转换成 es5。

解决方法

方法1

看网上大神的推荐，可以用 swiper3, 也就是降级处理，问题是需要解决版本用法上的区别。（有修改成本，不是最快的解决方案）

方法2（推荐）

一般引入方式是

 import Swiper from 'swiper'  // 也是 Swiper官方推荐

这种方式的问题就在于，加载的是swiper.esm.bundle.js，这个文件，如果不在webpack配置转义的话，就会出现兼容问题。

所以需要修改下

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

why? 因为swiper.min.js是编译好的兼容es6的版本。（修改成本低，快速高效）

方法3 - 添加编译（参考: https://www.jianshu.com/p/cebe2b28df85）

• 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)\/.*/)
  }
}

参考链接：
记一次Vue使用Swiper的坑
Vue 2.0+Vue-cli+swiper项目在安卓5.1上白屏的问题