如何自定义 Vue CLI 生成的 JS 文件的名称？答案

【问题标题】：How to customise names of the JS files produced by Vue CLI?如何自定义 Vue CLI 生成的 JS 文件的名称？
【发布时间】：2021-01-20 05:22:59
【问题描述】：

我找不到有关如何使用 vue cli 最小化资产和生成 *.min.js 文件的文档。我正在使用 vue cli 版本 4.2.3。

我要求扩展名是 *.min.js 才能使滚动条正常工作。

您将如何配置 vue cli 以生成最小化的资产？（不涉及 TS）。

【问题讨论】：

我很确定 VueCLI 会在 production 模式下缩小 js 文件。所以我猜你的问题只是命名，对吧？

标签： vue.js webpack vue-cli-4

【解决方案1】：

我确信 Vue CLI 在生产模式下运行 build 时会缩小 JS 输出。它只是使用不同的命名约定（没有“min.js”）

要调整 Vue CLI 生成的 JS 块的文件名，您可以执行以下操作：

通过在命令行（开发模式）或 vue inspect --mode production（生产模式）上运行 vue inspect 来检查 Vue CLI 使用的默认 Webpack 配置

寻找output（应该在输出的开头附近）。在我的项目中是这样的：

开发模式：

output: {
    path: '.....some dir\\dist',
    filename: 'js/[name].js',
    publicPath: '/',
    chunkFilename: 'js/[name].js'
  },

生产方式：

output: {
    path: '.....some dir\\dist',
    filename: 'js/[name].[contenthash:8].js',
    publicPath: '/',
    chunkFilename: 'js/[name].[contenthash:8].js'
  },

现在您可以对其进行调整 - 如果您还没有 vue.config.js，请将其添加到您的项目中并添加以下内容：

module.exports = {
    configureWebpack: config => {
      if(process.env.NODE_ENV === "production") {
        config.output.filename = 'js/[name].[contenthash:8].min.js'
        config.output.chunkFilename = 'js/[name].[contenthash:8].min.js'
      } else {
        config.output.filename = 'js/[name].js'
        config.output.chunkFilename = 'js/[name].js';
      }
    }
}

[name] 和 [contenthash:8] 是 Webpack 占位符 - documentation 中的更多信息

【讨论】：

非常感谢！正是我需要的。