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

Posted 2023-02-22

【中文标题】Vue Cli 3 禁用代码拆分 - 无法摆脱哈希文件

【英文标题】：Vue Cli 3 disabling code splitting - Can't get rid of the hash file

【发布时间】：2020-02-10 15:06:35

【问题描述】：

我有一个运行良好的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 项目。我缺少什么设置来取消这个文件？

【参考方案1】：

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

相反，您可以通过css.extract 中的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"