如何拆分@vue/cli 3 "pages“供应商文件

@vue/cli是一个基于Vue.js的脚手架工具，用于快速搭建Vue.js项目。在@vue/cli 3中，可以通过配置"pages"选项来拆分供应商文件。

拆分"pages"供应商文件的目的是将不同页面的代码分割成不同的文件，以提高应用的性能和加载速度。下面是拆分"pages"供应商文件的步骤：

1. 在项目的根目录下，找到vue.config.js文件（如果没有则需要手动创建）。
2. 在vue.config.js文件中，添加以下配置：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all',
            priority: 10,
            enforce: true
          },
          common: {
            name: 'common',
            chunks: 'all',
            minChunks: 2,
            priority: 5,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

上述配置中，通过configureWebpack选项来配置webpack的优化选项。其中，splitChunks用于配置代码分割的规则。

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

通过以上配置，@vue/cli 3会将所有来自node_modules目录下的模块打包到名为"vendor"的供应商文件中。同时，还会将被至少两个页面引用的模块打包到名为"common"的供应商文件中。

这样做的好处是，当多个页面引用相同的模块时，这些模块只会被加载一次，从而减少了重复加载的时间和带宽消耗。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云云数据库MySQL版、腾讯云CDN等。

腾讯云产品介绍链接地址：

• 腾讯云云服务器（CVM）
• 腾讯云对象存储（COS）
• 腾讯云云数据库MySQL版
• 腾讯云CDN

请注意，以上答案仅供参考，具体的配置和推荐产品可能会根据实际需求和情况有所不同。