How can I create two separate bundles with vue-cli 3?

在使用Vue CLI 3创建项目时，若需生成两个独立的捆绑包（bundle），可以通过配置多页面应用来达到这个目的。以下是步骤和示例：

步骤 1: 安装 Vue CLI 并创建项目

首先，确保已安装Vue CLI。如果未安装，可以通过npm安装：

bash
npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli

然后，创建一个新的Vue项目：

bash
vue create my-project
cd my-project

步骤 2: 配置多页面应用

在项目根目录下，修改vue.config.js文件（如果文件不存在，需新建一个）。在这个配置文件中，你可以指定多个入口文件，每个入口文件将被打包成一个独立的捆绑包。

假设我们要创建两个捆绑包，分别为home和about：

javascript
module.exports = {
  pages: {
    home: {
      // page 的入口
      entry: 'src/pages/home/main.js',
      // 模板来源
      template: 'public/home.html',
      // 在 dist/index.html 的输出
      filename: 'home.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Home Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'home']
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: 'public/about.html',
      filename: 'about.html',
      title: 'About Page',
      chunks: ['chunk-vendors', 'chunk-common', 'about']
    }
  }
}

步骤 3: 创建相应的入口文件和模板

对于每个页面，需要创建对应的入口JS文件和HTML模板。例如：

• src/pages/home/main.js
• public/home.html
• src/pages/about/main.js
• public/about.html

步骤 4: 运行或构建项目

运行开发服务器查看结果：

bash
npm run serve

或者构建项目：

bash
npm run build

构建完成后，将在dist目录下看到两个独立的HTML文件（home.html和about.html），每个文件都有对应的JS和CSS捆绑包。

示例

这个配置允许你根据不同的页面需求加载不同的资源，非常适合大型项目，或者需要针对不同页面优化加载速度的场景。