vue-cli-service构建lib包时如何禁用use strict解决IE11兼容报错

前置说明 #

你遇到的严格模式注入不属于vue-cli上层封装的配置项，是底层依赖的Babel、webpack压缩插件自动添加的，按以下步骤修改配置即可： #

步骤1：修改Babel配置，禁用自动注入严格模式 #

在项目根目录找到babel.config.js（无则新建），添加如下配置：

module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      {
        // 关闭Babel自动为模块注入严格模式
        strict: false,
        // 关闭模块转换时的严格模式关联配置
        modules: false
      }
    ]
  ]
}

步骤2：修改webpack压缩配置，禁用压缩阶段添加严格模式 #

在项目根目录找到vue.config.js（无则新建），添加如下配置：

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack: {
    output: {
      // 关闭webpack模块严格模式
      strictModule: false
    },
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              // 禁止压缩工具自动添加严格模式声明
              strict: false
            }
          }
        })
      ]
    }
  }
}

验证效果 #

配置修改完成后，直接执行你原有的打包命令即可：
cross-env NODE_ENV=production vue-cli-service build --target lib --name testLib ./src/index.js --skip-plugins @vue/cli-plugin-eslint
打包完成后打开dist目录下的产物文件，搜索"use strict"确认已无全局注入的严格模式声明，IE11下的重复属性报错即可解决。 #

内容的提问来源于stack exchange，提问作者Ivan Pany