配置 webpack 的 SplitChunksPlugin

Vue CLI 3 构建的 Vue 2 项目，配置 webpack 的 SplitChunksPlugin 插件，可以按照以下步骤进行操作：

1. 打开项目根目录下的 vue.config.js 文件（如果没有该文件，可以在根目录下创建一个）。

2. 在 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 配置相同，请参考之前的解释。

3. 保存 vue.config.js 文件。

通过以上配置，SplitChunksPlugin 插件将按照我们指定的规则对代码进行分割，将公共的依赖模块提取到单独的文件中。

备注：

• 请确保已经安装了 @vue/cli 的版本为 3 或以上。
• 以上配置是基于 Vue CLI 3 默认的 webpack 配置进行修改，如果你已经对默认配置进行了自定义，请按照实际情况进行调整和合并配置。
• 配置文件名必须为 vue.config.js，并位于项目的根目录下，以确保 Vue CLI 能够正确识别和加载配置。
• 请根据实际需求和项目特点进行适当的优化和调整。