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

在vue-cli生成的vue.config.js中设置mini-css-extract-plugin的配置，可以通过以下步骤实现：

1. 打开vue.config.js文件，如果不存在该文件，则在项目根目录下创建一个名为vue.config.js的文件。
2. 在文件中添加以下代码：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css',
        chunkFilename: '[id].[contenthash].css',
      }),
    ],
  },
};

1. 保存文件并重新启动项目。

上述代码中，我们首先引入了mini-css-extract-plugin插件，然后在configureWebpack配置项中添加了该插件的实例化对象。在实例化对象中，我们可以设置filename和chunkFilename属性来定义生成的CSS文件的命名规则。

• filename：指定生成的CSS文件的名称，默认为main.css。
• chunkFilename：指定按需加载的CSS文件的名称，默认为[id].css。

这样，通过设置mini-css-extract-plugin的配置，我们可以将CSS文件从打包的JS文件中分离出来，提高页面加载速度和缓存效果。

推荐的腾讯云相关产品：无

希望以上信息对您有所帮助。