vue-cli --target lib模式下如何重命名webpackChunkName？

我之前也遇到过一模一样的困扰——用vue-cli-service build --target lib构建Vue库时，异步加载的i18n本地化文件会跟着commonjs、umd、umd.min三种模块格式重复生成，既浪费空间又不符合预期目录结构。以下是我验证有效的解决方案：

步骤1：调整异步导入的魔法注释 #

先把你的异步导入代码里的chunk名称注释修改为：

import(/* webpackInclude: /\.json$/, webpackChunkName: "[request]" */ `./i18n/${locale}`)

这里去掉了i18n/前缀，我们会通过webpack配置来统一指定chunk的输出目录，避免重复生成路径。

步骤2：修改vue.config.js的webpack配置 #

在vue.config.js中使用chainWebpack来精准针对lib构建目标修改配置（比直接用configureWebpack更适配vue-cli的多格式构建逻辑）：

module.exports = {
  chainWebpack: config => {
    // 仅对lib构建目标生效，避免影响其他构建场景
    if (process.env.VUE_CLI_BUILD_TARGET === 'lib') {
      // 遍历vue-cli为lib生成的所有entry（对应commonjs、umd、umd.min三种格式）
      config.entryPoints.values().forEach(entry => {
        entry.get('output').tap(outputOptions => {
          // 统一异步chunk的输出路径和文件名
          outputOptions.chunkFilename = 'i18n/[name].js'
          // 设置全局chunk加载变量，避免不同格式的chunk加载逻辑冲突
          outputOptions.chunkLoadingGlobal = 'mylibChunkLoading'
          return outputOptions
        })
      })
    }
  }
}

步骤3：重新执行构建命令 #

运行你原来的构建命令即可：

vue-cli-service build --target lib --name mylib ./src/components/mylib.vue --dest ./dist

方案原理说明 #

当构建lib目标时，vue-cli会为commonjs、umd、umd.min分别创建独立的webpack配置，每个配置默认会生成对应格式后缀的异步chunk（比如en.common.js、en.umd.js）。通过上面的配置，我们强制所有格式的异步chunk都输出到dist/i18n目录下，并且使用统一的文件名，从而避免重复生成。

最终目录结构验证 #

构建完成后，你的dist目录会完全符合预期：

dist/
|- mylib.common.js
|- mylib.umd.js
|- mylib.umd.min.js
|- mylib.css
|- i18n
   |- en.js
   |- es.js
   |- de.js

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