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

Question

我有一个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");
  }
}; 

命令行输出如下所示：

我只想输出../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相反，您可以通过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"
    }
  }
}