Vue3 + Vite 多页面开发
Vue 被设计用来制作 SPA （单页面应用），想要进行多页面开发需要在构建工具（如 Vite ）中进行配置。
目前 Vue 默认的脚手架工具为 Vite，本文基于 Vue3 + Vite 简单介绍一下配置多页面应用的方式。
前言
回顾传统的 HTML 开发项目，想要在“主页”和“详情页”之间跳转，通常会开发两个不同的 .html 页面，然后通过 a 标签进行跳转。
在 Vue 中使用了 Vue-Router 可以实现组件的跳转和渲染，在 Bulbox 中就是在单页面应用中通过 Vue-Router 的配置实现了“首页”和“详情页”的不同渲染。但是路由和功能稍复杂一点，或者是不同页面之间的功能相对独立，那这种方式就有点捉襟见肘。
那么如何构建一个多页面应用呢？
多页面就是指的有多个 HTML 页面，因此多页面应用必然要在当前的 Vue 项目中创建新的 HTML 页面，起初我以为只需要构建新的 .vue 即可，还是囫囵吞枣对 Vue 的理解不够。
其实创建多页面应用和编写传统的 HTML 是类似的，使用 npm create vue@latest 可以创建一个 Vue3 + Vite 的单页面应用，此时在根目录会有一个 index.html，这个是项目的默认入口。
我们只需要在根目录下继续创建其他的 HTML 页面就能实现跳转：
简化的 Vue 项目目录结构：
TestMultiPage
├─src
│ ├─App.vue
│ ├─App2.vue
│ ├─main.js
│ └─main2.js
├─test.html
└─index.html
然后通过 main.js 将 App.vue 挂载到 index.html，通过 main2.js 将 App2.vue 挂载到 test.html:
<!-- App.vue -->
<script setup>
function change() {
window.location.href = "/test.html";
}
</script>
<template>
This is index
<button @click="change">跳转</button>
</template>
<style></style>
<!-- App2.vue -->
<script setup>
function change() {
window.location.href = "/";
}
</script>
<template>
This is Test
<button @click="change">跳转</button>
</template>
<style></style>
此时点击跳转可以跳转到其他页面，但当我们使用 npm run build 之后会发现新建的 test 页面并没有被打包到 dist 中，因此也无法在打包后实现正常的多页面功能。
这是因为在 Vite 还是根据单页面的配置进行打包，如果希望打包后仍然能够正常使用，就必须对 Vite 进行配置。
开始配置
规范项目目录
在刚才的例子中可以看到跳转中使用的是：window.location.href = "/test.html";，必须要指定到具体的页面才能实现跳转，除了 url 的美观度，另一方面也会让项目变得复杂，我们可以将根目录下的 test.html 替换为以下结构的文件夹：
test
├─main.js // 之前 src/main2.js 需要移动到这里
└─index.html
这样做的好处是：
- 根目录结构清晰
- 单页面的配置被集合在了一起
- url 访问时只需要
/test/即可，浏览器会自动寻找该目录下的index.html
如果创建了多个页面，则其组织结构可能如下（省略了部分文件目录）：
TestMultiPage
├─src
│ ├─App.vue
│ ├─main.js
│ ├─assets
│ ├─components
│ ├─router
│ │ ├─index.js
│ └─views
├─page1
│ ├─main.js
│ └─index.html
├─page2
│ ├─main.js
│ └─index.html
├─page3
│ ├─main.js
│ └─index.html
├─index.html
├─package-lock.json
├─package.json
├─README.md
└─vite.config.js
在 Vite 中配置
在 vite.config.js 中添加 build 选项，可以配置其 rollupOptions 属性实现多页面打包的配置：
//vite.config.js
build: {
rollupOptions: {
input: {
main: '/index.html',
page1: '/page1/index.html',
page2: '/page2/index.html',
page3: '/page3/index.html'
}
}
},
经过以上配置之后就可以实现 Vite 打包多页面应用了，但是在编辑多页面的时候需要注意路径问题。
多页面应用的开发
与开发单页面应用相同，多页面的开发的组件仍需要放在 /src 下面，可以参考以下目录结构（省略了具体文件）：
src
├─assets
│ ├─css
│ ├─font
│ ├─img
│ └─js
├─page1
│ ├─components
│ ├─router
│ ├─views
│ └─page1.vue
├─page2
│ ├─components
│ ├─router
│ ├─views
│ └─page2.vue
├─page3
│ ├─components
│ ├─router
│ ├─views
│ └─page3.vue
├─components
├─router
├─store
├─views
└─App.vue
将对应的组件放到对应的 /src/page 下。
多页面跳转
在之前开发时存在一个误区，错误的把多页面应用中的不同页面看成了一个整体，认为不同的页面之间可以共享 Pinia、Vue-Router 等内容，但实际上这个想法是错误的。
我们对每个子页面都构建了一个新的 Vue 应用，因此每个应用的 Pinia、Vue-Router 都是独立的，我们可以引用同一个配置文件，但是无法实现其中的信息共享。
以 Vue-Router 为例，Vue-Router 解析的作用范围是其挂载的 Vue 实例，如果让其解析 Vue 实例之外的 URL 则不会达到预定效果。在不同页面之间实际上是切换了不同的 Vue 实例，因此不能够使用 Vue-Router 进行操作。
因此想要实现不同页面的跳转仍然需要 a 标签或者是在 JS 中使用 WebAPI 进行跳转：
// WebAPI
window.location.href = 'target_path'