externals 配置方式根据 output.libTarget 的类型不同而不同

[yubaoquan]

默认情况下, 配置的值是依赖库暴露到全局的变量名, 这种情况下需要依赖将自己向 window 上赋值

module.exports = {
  //...
  externals: {
    'element-ui': 'ELEMENT', // 找 window.ELEMENT
  },
};

如果 output.libTarget 配置为 'umd', 则配置的值可以是依赖包的包名. 但是这种配置方式的话, 相当于代码不是一个 vue app, 导致本地 vue-cli-service serve 无法启动

module.exports = {
  //...
  externals: {
    'element-ui': 'element-ui',
  },
};

所以如果本地想作为 vue app 开发, 打包的时候想打成 lib, 有两个方法:

1. 本地环境单独用一个 vue.config.js, 用于本地起应用来开发, 要打包的部分抽到一个单独文件夹中, 用另一个 vue.config.js, 用于跑打包命令;
2. 在 vue.config.js 中动态配置 externals:

const getArgv = (argName) => {
  const findIndex = process.argv.findIndex((v) => v === argName)
  return (findIndex === -1) ? '' : process.argv[findIndex + 1] || ''
}

//...
configureWebpack(config) {
    if (getArgv('--target')=== 'lib') {
      config.externals = {
        'element-ui': 'element-ui',
      }
    }
  },

参考

webpack 关于 externals 的文档