Vue CLI 3 构建的 Vue 2 项目，配置 webpack 的 SplitChunksPlugin 插件，可以按照以下步骤进行操作：
-
打开项目根目录下的
vue.config.js文件（如果没有该文件，可以在根目录下创建一个）。 -
在
vue.config.js文件中添加以下内容：
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
priority: -10,
enforce: true,
},
common: {
name: 'common',
chunks: 'all',
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
},
};
在上述配置中，我们使用了 configureWebpack 选项来配置 webpack。具体配置项的含义和解释与之前提供的 webpack 配置相同，请参考之前的解释。
- 保存
vue.config.js文件。
通过以上配置，SplitChunksPlugin 插件将按照我们指定的规则对代码进行分割，将公共的依赖模块提取到单独的文件中。
备注：
- 请确保已经安装了
@vue/cli的版本为 3 或以上。 - 以上配置是基于 Vue CLI 3 默认的 webpack 配置进行修改，如果你已经对默认配置进行了自定义，请按照实际情况进行调整和合并配置。
- 配置文件名必须为
vue.config.js，并位于项目的根目录下，以确保 Vue CLI 能够正确识别和加载配置。 - 请根据实际需求和项目特点进行适当的优化和调整。