[Vue]Vue常见问题汇总

[BowenZ]

一、IOS10报错

项目在除了iOS 10之外的环境中运行没有问题，在iOS 10系统中会报错：

SyntaxError: Cannot declare a let variable twice: ‘e’.

定位到错误代码位置：

addClass: function(e) {
    if (void 0 === e) return this;
    const t = e.split(" ");
    for (let e = 0; e < t.length; e += 1)
        for (let s = 0; s < this.length; s += 1) void 0 !== this[s].classList && this[s].classList.add(t[e]);
    return this
}

这段代码是webpack编译出来的，本身是没有语法错误的，但iOS 10中的Safari会认为是错误，这个问题已经在iOS 11中修复，但我们的代码依然要为iOS 10系统买单。

解决办法：

• 打开build/webpack.prod.conf.js文件
• 在UglifyJsPlugin的定义里添加关于mangle的选项，如下:

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false
    },
    mangle: {
      safari10: true
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
})

二、iOS 8中样式错乱问题

iOS8某些CSS样式（如transform）需要加浏览器前缀-webkit-，虽然vue项目中自带autoprefixer，但是默认配置为：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

默认配置在transform中是不会加前缀的，所以需要修改package.json配置如下：

"browserslist": [
  "> 1%",
  "last 10 Chrome versions",
  "last 5 Firefox versions",
  "Safari >= 6",
  "ie > 8"
]

配置后build出来的代码就会兼容iOS8。