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

Question

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

我需要扩展为 *.min.js 才能使滚动条正常运行。

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

Answer 1

我确信 Vue CLIbuild在生产模式下运行时会缩小 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',
    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 占位符 -文档中的更多信息