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

Question

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

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

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

Answer 1

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

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

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

寻找 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

中有更多信息

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

How to customise names of the JS files produced by Vue CLI?

webpack

vue.js

vue-cli-4