Vue Cli 3禁用代码拆分-无法摆脱哈希文件

Question

我有一个vue.config.js设置，可以很好地运行并取消默认的代码拆分。

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

vue.congig.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");
 }
}; 

输出看起来像：

我只想输出../assets/js/sales-report.js ../assets/css/sales-report.css，但找不到正确的设置来取消../assets的输出/css/app.fd4aa059.css

如果您要测试，那么该拟合将适用于任何vue cli 3项目。我缺少什么设置来取消此文件？

Answer 1

Vue CLI项目已经使用mini-css-extract-plugin，因此，在您发现的情况下，在configureWebpack中插入一个新项目将导致重复的CSS处理。

相反，您可以通过css.extract中的css.extract配置现有插件。它看起来应该类似于：

vue.config.js