vue2.x ie8 兼容

3,102 阅读1分钟

增加 webpack 插件 es3ify-webpack-plugin(关键字问题)

增加压缩 IE8 配置

new UglifyJsPlugin({
    uglifyOptions: {
        // ecma: 5,
        ie8: true,
        compress: {
            drop_console: true,
            // warnings: false,
        },
        output: {
            ascii_only: true,
            // quote_keys: true,
        },
    },
    sourceMap: true,
}),

webpack 配置 (ie8 Unexpected token: punc)

module: {
  rules: [
    {
      test: /\.js$/,
      // exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
      },
    },
  ],
},

bable 配置

presets: [
    [
      '@vue/app',
      // '@babel/preset-env',
      {
        useBuiltIns: 'entry',
        loose: true,
      },
    ],
],

main.js 导入

import '@babel/polyfill';

增加 babel 插件(get、set 语法)

'transform-es5-property-mutators',

index.html 引入 shim(缺少的 es5 api)

<script src="<%= BASE_URL %>es6-shim.js"></script>
<script src="<%= BASE_URL %>es5-shim.js"></script>

ie8 正则兼容问题

// var literal = /\[([^]*?)\]/gm;
var literal = /\[([\s\S]*?)\]/gm;
https://stackoverflow.com/questions/21931523/ie8-expected-in-regular-expression

.browserslistrc(浏览器兼容定义)

> 0.25%
last 2 versions
ie 8

最重要的一点-运气 😂,祝好运~