前言：VueCli默认创建的为单页面应用，如果我们需要在一个工程项目中实现多个入口的页面
步骤
1. 使用npm create vue@latest命令行快速创建一个基于 Vite 的项目
project-name/
|-- public/ # 静态资源目录
| |-- index.html # 主HTML模板
|-- src/ # 源代码目录
| |-- assets/ # 静态资源目录
| | |-- logo.png
| |-- components/ # 公共组件目录
| | |-- MyComponent.vue
| |-- App.vue # 应用程序的根组件
| |-- main.js # 应用程序的入口文件
|-- vite.config.js # vite配置文件
|-- package.json # 项目配置文件
|-- README.md # 项目说明文件
|-- index.html # 项目说明文件
2. 在vite.config.js文件中配置多页面
import path, { resolve } from 'path'
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const __filenameNew = fileURLToPath(import.meta.url)
const __dirnameNew = path.dirname(__filenameNew)
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
rollupOptions: {
// 配置多页面
input: {
index: resolve(__dirnameNew, 'index.html'),
zendo1: resolve(__dirnameNew, 'zendo1.html'),
zendo2: resolve(__dirnameNew, 'zendo2.html')
}
}
}
})
新建项目文件存放目录
project-name/
|-- public/ # 静态资源目录
| |-- index.html # 主HTML模板
|-- src/ # 源代码目录
| |-- assets/ # 静态资源目录
+| |-- pages/ # 公共组件目录
+| | |-- zendo1/
+| | | |-- router/
+| | | |-- views/
+| | | |-- App.vue
+| | | |-- main.js
+| | |-- zendo2/
+| | | |-- router/
+| | | |-- views/
+| | | |-- App.vue
+| | | |-- main.js
| |-- components/ # 公共组件目录
| |-- App.vue # 应用程序的根组件
| |-- main.js # 应用程序的入口文件
|-- vite.config.js # vite配置文件
|-- package.json # 项目配置文件
|-- README.md # 项目说明文件
|-- index.html # 页面入口1
+|-- zendo1.html # 页面入口2
+|-- zendo2.html # 页面入口3
pages中新增的zendo1文件夹和zendo2文件夹是一个独立的项目结构，但也可引用全局的公共组件及依赖
根目录下新增入口文件
在入口文件中引用新增的页面项目的main.js,其内容为
<!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>Zendo</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/pages/zendo1/main.js"></script>
</body>
</html>
