Supporting multiple entry points in a Vue3 project

  1. install Vite:
  2. Configure Vite for multiple entry points:
  3. Create the additional HTML template:
  4. Create the additional entry file:
  5. Run the development server or build the project:

Supporting multiple entry HTML files in a Vue 3 project typically involves configuring your build tool (like Webpack or Vite) to handle multiple entry points. Here’s how you can achieve this with Vite.

install Vite:

1
2
3
npm init vite@latest my-project --template vue
cd my-project
npm install

Configure Vite for multiple entry points:

Edit vite.config.js to specify multiple entry points:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, "index.html"),
        another: path.resolve(__dirname, "another.html"),
      },
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

In this configuration, index.html and another.html are specified as entry points.

Create the additional HTML template:

Create another.html in the root directory (next to index.html):

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Another Page</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/another.js"></script>
  </body>
</html>

Create the additional entry file:

Create src/another.js and set up your Vue app as usual:

1
2
3
4
import { createApp } from "vue";
import AnotherComponent from "./AnotherComponent.vue";

createApp(AnotherComponent).mount("#app");

Run the development server or build the project:

1
2
npm run dev  // For development
npm run build  // For production build

This setup will allow you to have multiple entry HTML files, each with its own Vue instance and build configuration.