Vue Cli 3 禁用代码分割 - 无法删除哈希文件

我有一个vue.config.js设置效果很好，并取消了默认的代码分割。

但它仍然输出一个 CSS 文件，其哈希值与具有好名称的 CSS 文件相同。我可以编写一个脚本来删除它，但我想知道是否有一种方法可以将文件设置为不输出带有哈希的CSS文件。

vue.config.js：

const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  outputDir: "../assets/",
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({
        filename: "/css/sales-report.css"
      })
    ],
    output: {
      filename: "./js/sales-report.js"
    }
  },
  chainWebpack: config => {
    config.optimization.delete("splitChunks");
  }
}; 

The command line output looks like:

我只想输出../assets/js/sales-report.js and ../assets/css/sales-report.css，并且我没有找到正确的设置来取消输出../assets/css/app.fd4aa059.css.

如果您想测试，此配置适用于任何 Vue CLI 3 项目。我缺少什么设置来取消此文件？

Vue CLI 项目已经使用mini-css-extract-plugin，因此插入一个新的configureWebpack正如您所发现的，会导致重复的 CSS 处理。

相反，您可以通过配置现有插件css.extract https://cli.vuejs.org/config/#css-extract in vue.config.js。它应该看起来类似于：

// vue.config.js
module.exports = {
  //...
  configureWebpack: {
    output: {
      filename: "./js/sales-report.js"
    }
  },
  chainWebpack: config => {
    config.optimization.delete("splitChunks");
  },
  css: {
    extract: {
      filename: "/css/sales-report.css"
    }
  }
}