百度了半天，没找到方法，最后还是在 Vite 官方文档找到了方法
目录结构：
- ├─about
- │ ├─App.vue
- │ └─main.js
- ├─node_modules
- │ └─...
- ├─others
- │ └─links
- │ ├─App.vue
- │ └─main.js
- ├─pages
- │ ├─App.vue
- │ ├─index.html
- │ └─page.js
- ├─public
- │ └─...
- ├─src
- │ ├─assets
- │ ├─components
- │ ├─App.vue
- │ └─main.js
- ├─about.html
- ├─index.html
- ├─links.html
- ├─package.json
- ├─vite.config.js
- ├─pnpm-lock.yaml
目录文件结构大概就是这样，主要还是 vite.config.js 和.html 的配置
vite.config.js 如下
- import { defineConfig } from 'vite'
- import vue from '@vitejs/plugin-vue'
- import AutoImport from 'unplugin-auto-import/vite'
- import Components from 'unplugin-vue-components/vite'
- import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
- const { resolve } = require('path')
-
- module.exports = defineConfig({
- plugins: [
- vue(),
- AutoImport({
- resolvers: [ElementPlusResolver()],
- }),
- Components({
- resolvers: [ElementPlusResolver()],
- }),
- ],
- // 主要是这里，引入.html的位置，用于build
- build: {
- rollupOptions: {
- input: {
- main: resolve(__dirname, 'index.html'),
- page: resolve(__dirname, 'pages/index.html'),
- about: resolve(__dirname, 'about.html'),
- links: resolve(__dirname, 'links.html'),
- }
- }
- }
- })
pages/index.html 的文件如下
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <link rel="icon" href="/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Vite App666</title>
- </head>
- <body>
- <div id="app"></div>
- <script type="module" src="/pages/page.js"></script>
- <!-- 引入的page.js文件就在pages目录下 -->
- </body>
- </html>
page.js 引入.vue 文件
- import { createApp } from 'vue'
- import App from './App.vue'
- createApp(App).mount('#app')
vue 文件内容
- <template>
- <div>
- App pages!
- </div>
- </template>
其他的 about 和 links 文件一样，只是 js 和 vue 存放在文件夹下，about 的 js 和 vue 文件在 about 文件夹下，links 的 js 和 vue 文件在 others 中 links 的文件夹下
build 后的文件目录如下
- │ 1.txt
- │ about.html
- │ favicon.ico
- │ index.html
- │ links.html
- │
- ├─assets
- │ about.bc937ba2.js
- │ links.b8927572.js
- │ logo.03d6d6da.png
- │ main.36fbf8cb.css
- │ main.df2033de.js
- │ page.b3575ca2.js
- │ plugin-vue_export-helper.ddefbfc0.js
- │ vendor.400c37bc.css
- │ vendor.b0d5a4fa.js
- │
- └─pages
- index.html