公司项目，因为一些特殊原因，需要兼容到 IE，最低还要兼容到 chrome 33，记录一下解决过程。

起因是在项目中引入了一个新包 crypto-js，其中的一个文件 enc-base64url.js 中的 parse 和 stringify 方法使用ES6的默认参数语法，导致低版本浏览器无法解析：

1
2
parse: function (base64Str, urlSafe=true) { ... }
stringify: function (wordArray, urlSafe=true) { ... }

起步

  • 软件环境
    1
    2
    3
    node      v14.16.1
    npm       v6.14.12
    @vue/cli  v4.5.13
  • package.json
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    "dependencies": {
      "vue": "2.6.10",
      "vue-router": "3.0.6",
      "vuex": "3.1.0"
    },
    "devDependencies": {
      "@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
      "@vue/cli-plugin-babel": "4.4.4",
      "@vue/cli-plugin-eslint": "4.4.4",
      "@vue/cli-plugin-unit-jest": "4.4.4",
      "@vue/cli-service": "4.4.4",
      "@vue/test-utils": "1.0.0-beta.29",
      "autoprefixer": "9.5.1",
      "babel-eslint": "10.1.0",
      "babel-jest": "23.6.0",
      "babel-plugin-dynamic-import-node": "2.3.3",
      "babel-plugin-jsx-v-model": "^2.0.3",
      "chalk": "2.4.2",
      "connect": "3.6.6",
      "eslint": "6.7.2",
      "eslint-plugin-vue": "6.2.2",
      "html-webpack-plugin": "3.2.0",
      "less": "^3.12.2",
      "less-loader": "^7.1.0",
      "mockjs": "1.0.1-beta3",
      "runjs": "4.3.2",
      "sass": "1.26.8",
      "sass-loader": "8.0.2",
      "script-ext-html-webpack-plugin": "2.1.3",
      "serve-static": "1.13.2",
      "svg-sprite-loader": "4.1.3",
      "svgo": "1.2.2",
      "vue-template-compiler": "2.6.10"
    }

解决过程

  1. 修改 browserslist 配置
    在 package.json 文件中修改 browserslist 配置为：

    1
    2
    3
    4
    5
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie < 9"
    ]

  2. 修改 vue.config.js 配置
    在 vue.config.js 中修改配置如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    module.exports = {
      /* 其它配置 */

      transpileDependencies: [
        // 因为项目新引入这个包，所以在这里写入报名
        // 文档：https://cli.vuejs.org/zh/guide/browser-compatibility.html
        'crypto-js',
      ],

      chainWebpack(config) {
        /* 其它配置 */
        
        config.entry.app = ["babel-polyfill", "./src/main.js"];

        /* 其它配置 */
      }

      /* 其它配置 */
    }

  3. 修改 babel.config.js 配置
    在 babel.config.js 中修改配置如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    module.exports = {
      presets: [ 
        '@vue/cli-plugin-babel/preset'
      ],
      'env': {
        'development': {
          'plugins': ['dynamic-import-node']
        }
      }
    }

至此，问题解决。