How to build a multi pages application by vite2 and vue3？

Question

I built a multi-page app with Vue CLI and Vue 2 by changing vue.config.js like below:

pages: {
    index: {
      entry: './src/pages/index/main.js',
      template: 'public/index.html',
      title: 'index page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    admin: {
      entry: './src/pages/admin/main.js',
      template: 'public/index.html',
      title: 'admin page',
      chunks: ['chunk-vendors', 'chunk-common', 'admin']
    }
},
...

But how do I build a multi-page app with Vite and Vue 3?

This is my Directory Structure. I edited the vite.config.js like this:

import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
/**
 * @type {import('vite').UserConfig}
 */
export default {
  plugins: [vue()],
  build:{
    rollupOptions:{
      input:{
        main:resolve(__dirname,'index.html'),
        admin:resolve(__dirname,'src/admin/index.html')
      }
    }
  }
}

But it returns errors when i build and i counld not open the admin page by localhost:3000/admin/index.html.

Answer 1

You could create two separate index.html for each entry point. For example, <projectRoot>/index.html imports <projectRoot>/main.js, while a nested <projectRoot>/admin/index.html imports <projectRoot>/admin/main.js.

Consider the following directory structure:

|-package.json
|-vite.config.js
|-index.html
|-main.js
|-admin/
|---index.html
|---main.js

You'd use this config to create the multi-page app:

// vite.config.js
const { resolve } = require('path')

module.exports = {
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'admin/index.html')
      }
    }
  }
}