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 处理，如您所见。

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

// 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"
    }
  }
}

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

Vue Cli 3 disabling code splitting - Can't get rid of the hash file

minify

webpack

vue.js

mini-css-extract-plugin

vue-cli-3