如何为Vue CLI 3构建的dist文件添加自定义前缀/后缀？

当然有办法解决这个问题！在Vue CLI 3中，我们可以通过自定义webpack配置，给打包生成的app.xxx.js、vendor.xxx.js这类文件加上应用专属前缀，避免多应用部署到同一目录时的文件冲突。下面是两种常用的实现方式：

方式一：直接配置configureWebpack #

在项目根目录创建（或修改）vue.config.js文件，通过configureWebpack直接修改webpack的输出规则：

module.exports = {
  configureWebpack: {
    output: {
      // 配置入口文件的命名规则
      filename: 'signup.[name].[hash].js',
      // 配置异步chunk文件的命名规则
      chunkFilename: 'signup.[name].[hash].js'
    }
  }
}

这里的[name]会自动替换为webpack默认的app、vendor等文件名标识，[hash]保留原有的哈希值，最终会生成类似signup.app.62948721.js、signup.vendor.3fc5b322.js的文件。

方式二：使用chainWebpack细粒度配置 #

如果你需要更灵活地调整webpack配置，可以用chainWebpack链式修改配置，同时还能顺便给CSS文件也加上前缀：

module.exports = {
  chainWebpack: config => {
    // 配置JS文件的输出命名
    config.output
      .filename('signup.[name].[hash].js')
      .chunkFilename('signup.[name].[hash].js')
    
    // 配置提取后的CSS文件命名（可选，如果你需要给CSS也加前缀的话）
    config.plugin('extract-css').tap(args => {
      args[0].filename = 'signup.[name].[hash].css'
      args[0].chunkFilename = 'signup.[name].[hash].css'
      return args
    })
  }
}

这种方式不仅能处理JS文件，还能通过修改extract-css插件的参数，让打包后的CSS文件也带上专属前缀，比如signup.app.xxxx.css。

最后一步 #

修改完vue.config.js后，重新执行打包命令：

vue-cli-service build

打包完成后，你就能在dist目录下看到所有带signup前缀的部署文件了，这样多个Vue应用部署到同一目录也不会出现文件覆盖或冲突的问题啦。

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