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

问题描述

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

我要求扩展名是* .min.js，滚动条才能正常运行。

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

解决方法

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

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

通过在命令行（开发模式）或vue inspect（生产模式）上运行vue inspect --mode production来检查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',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中的更多信息