如何使用vite2和vue3构建多页面应用？

Question

vue.config.js我通过如下更改使用 Vue CLI 和 Vue 2 构建了一个多页面应用程序：

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']
    }
},
...

但是如何使用 Vite 和 Vue 3 构建多页面应用程序呢？

这是我的目录结构。我像这样编辑了 vite.config.js：

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')
      }
    }
  }
}

但当我构建时它返回错误，并且我无法通过 localhost:3000/admin/index.html 打开管理页面。

Answer 1

您可以index.html为每个入口点创建两个单独的入口点。例如，<projectRoot>/index.htmlimports <projectRoot>/main.js，而嵌套的<projectRoot>/admin/index.htmlimports <projectRoot>/admin/main.js。

考虑以下目录结构：

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

您可以使用此配置来创建多页面应用程序：

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