vue项目怎么把代码分开打包

在 Vue 项目中，可以通过 webpack 的配置来实现把代码分开打包的功能。具体步骤如下：

在 webpack 的配置文件中，使用 splitChunks 配置项来指定需要分离的模块。如下代码：

module.exports = {
  // ...
  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',
        },
      },
    },
  },
};

上述代码中，我们使用了 cacheGroups 中的 vendor 配置项，表示把所有来自 node_modules 目录下的模块打包到一个名为 vendor 的文件中。

在 Vue 的配置文件中，使用 configureWebpack 配置项来将 webpack 的配置文件合并到 Vue 的默认配置中。如下代码：

module.exports = {
  // ...
  configureWebpack: require('./webpack.config.js'),
};

上述代码中，我们将 webpack 的配置文件路径传入 require 函数中，然后将返回的配置对象合并到 Vue 的默认配置中。

在 Vue 组件中，通过 import() 函数来动态加载分离出来的模块。如下代码：

import(/* webpackChunkName: "vendor" */ 'some-module').then((module) => {
  // do something with the module
});

上述代码中，我们使用了 webpack 的 webpackChunkName 注释来指定加载的模块文件名。这个文件名应该与 webpack 配置文件中 cacheGroups 中的 name 属性一致，以确保正确加载分离出来的代码。

以上就是在 Vue 项目中实现代码分离的基本步骤。需要注意的是，由于 Vue CLI 已经内置了 webpack 的配置文件，因此我们需要将上述的配置项添加到 Vue CLI 的默认配置中，或者通过 vue.config.js 文件来覆盖默认配置。