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

When creating a project with Vue CLI 3, if you need to generate two separate bundles, configure a multi-page application to achieve this. Below are the steps and examples:

Step 1: Install Vue CLI and Create Project

First, ensure Vue CLI is installed. If not, install it via npm:

bash
npm install -g @vue/cli
# or use yarn
yarn global add @vue/cli

Then, create a new Vue project:

bash
vue create my-project
cd my-project

Step 2: Configure Multi-Page Application

In the project root directory, modify the vue.config.js file (create it if it doesn't exist). In this configuration file, specify multiple entry files, each of which will be bundled into a separate bundle.

Assume we want to create two bundles, named home and about:

javascript
module.exports = {
  pages: {
    home: {
      // page entry
      entry: 'src/pages/home/main.js',
      // template source
      template: 'public/home.html',
      // output filename in dist/index.html
      filename: 'home.html',
      // when using title option,
      // template's title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Home Page',
      // blocks included in this page, by default includes
      // extracted common chunk and 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']
    }
  }
}

Step 3: Create Corresponding Entry Files and Templates

For each page, create the corresponding entry JavaScript files and HTML templates. For example:

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

Step 4: Run or Build the Project

Run the development server to view the results:

bash
npm run serve

Or build the project:

bash
npm run build

After building, you will find two separate HTML files (home.html and about.html) in the dist directory, each with corresponding JavaScript and CSS bundles.

Example

This configuration enables loading different resources based on the specific requirements of each page, making it ideal for large projects or scenarios where optimizing loading speed for different pages is necessary.