在 Vue.js CLI（webpack 配置）中更改 chunk-vendors.js 的路径答案

【问题标题】：Change the path of the chunk-vendors.js in Vue.js CLI (webpack config)在 Vue.js CLI（webpack 配置）中更改 chunk-vendors.js 的路径
【发布时间】：2019-09-30 12:48:51
【问题描述】：

我有以下vue.config.js：

module.exports = {
filenameHashing: false,
productionSourceMap: false,
outputDir: '../vuejs/',
configureWebpack: {
    devtool: 'source-map',
    output: {
        filename: '[name].js'
    }
},
pages: {
    feature1: {
        entry: 'src/f1.js',
        template: 'public/feature.html',
        filename: 'index1.html',
        title: 'Feature 1',
        chunks: ['chunk-vendors', 'chunk-common', 'feature1']
    },
    feature2: {
        entry: 'src/f2.js',
        template: 'public/feature.html',
        filename: 'index2.html',
        title: 'Feature 2',
        chunks: ['chunk-vendors', 'chunk-common', 'feature2']
    }
} 
}

在npm run build 上生成：

index1.html 
index2.html 
feature1.js 
feature2.js 
js/chunk-vendors.js

在 dist 文件夹中 (../vuejs/)

如何更改配置，以便将文件 chunk-vendors.js 放置在根文件夹中（feature1.js 和 feature2.js 所在的位置）。

附：：（额外的问题）我实际上不需要 html 文件，因为我将 vue.js *.js 嵌入到现有应用程序中。我可以禁止生成 html 文件吗？

【问题讨论】：

你看过webpack.js.org/concepts/output 。您应该能够指定另一个属性路径
@CodeSurvivor 嗨 - 感谢您的提示。我按照 vue-cli-service build 命令的建议使用 outputDir。如果尝试使用 output.path，则会得到：配置错误：避免直接修改 webpack output.path。请改用“outputDir”选项。如前所述，我在正确的位置获得了两个文件 feature1 和 feature2。只有 chunk-vendors.js 进入 ./js/ 文件夹 ...
嗨@AlexanderMihailov - 这有什么成功吗？我有同样的问题，outputDir 正在构建我想要的主应用程序文件，但chunk-vendors 不是。谢谢！

标签： vue.js webpack configuration command-line-interface

【解决方案1】：

你可以定义一个显式的chunkFilename；例如：

module.exports = {
  outputDir: 'my/custom/build/path/',
  configureWebpack: (config) => {
    config.output.filename = '[name].[hash:8].js';
    config.output.chunkFilename = '[name].[hash:8].js';
  }
}

应该生成类似的东西：

my/custom/build/path/app.216ad62b.js
my/custom/build/path/app.216ad62b.js.map
my/custom/build/path/chunk-vendors.6f85144f.js
my/custom/build/path/chunk-vendors.6f85144f.js.map

希望这会有所帮助:)

【讨论】：