如何在 vue-cli 生成的 vue.config.js 中设置 mini-css-extract-plugin 的配置答案

【问题标题】：How to set the configuration of mini-css-extract-plugin in vue.config.js generated by vue-cli如何在 vue-cli 生成的 vue.config.js 中设置 mini-css-extract-plugin 的配置
【发布时间】：2021-07-10 22:42:21
【问题描述】：

我有一个相当大的 Vue 项目，最初是用 vue-cli 创建的。我在构建时收到臭名昭著的“无法满足所需的块组顺序”警告。经过大量搜索，我认为解决方案是将ignoreOrder 添加到mini-css-extract-plugin 的初始配置选项中，但我不知道如何。我认为这应该在vue.config.js 中完成。该文件的内容是：

module.exports = {
  lintOnSave: false
}

我试过了：

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({ ignoreOrder: true })
    ]
  }
}

但这给了我一个错误，我认为这意味着模块被加载了两次。

我试过了：

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      ignoreOrder: true
    }
  }
}

但这给了我一个语法错误。

如何设置该选项？

【问题讨论】：

标签： vue.js webpack vue-cli mini-css-extract-plugin

【解决方案1】：

根据document，您可以通过css.extract 属性传递选项来传递min-css-extract-plugin 的配置，如下所示：

// vue.config.js
module.exports = {
  // ...,
  css: {
    extract: {
      ignoreOrder: true
    },
  }
};

【讨论】：

谢谢谢谢谢谢谢谢！我正在查看该页面，但没有将关键字“提取”与该插件相关联。