vue如何实现多页
Vue 实现多页应用的方法
Vue 默认是单页应用（SPA），但通过配置可以实现多页应用（MPA）。以下是实现多页应用的步骤：
配置多入口
在 vue.config.js 中配置多个入口文件，每个页面对应一个入口。例如：
module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html',
},
about: {
entry: 'src/pages/about/main.js',
template: 'public/about.html',
filename: 'about.html',
},
},
};创建独立的页面目录
为每个页面创建独立的目录，包含各自的入口文件、组件和路由。例如：
src/
pages/
index/
main.js
App.vue
components/
about/
main.js
App.vue
components/配置路由
每个页面的路由需要独立配置。例如，在 src/pages/about/main.js 中：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
router,
render: h => h(App),
}).$mount('#app');生成多HTML文件
通过 vue.config.js 的 pages 配置，Vue CLI 会为每个入口生成独立的 HTML 文件。确保 public 目录下有对应的模板文件（如 index.html 和 about.html）。
静态资源处理
静态资源可以通过公共路径区分。在 vue.config.js 中配置 publicPath：
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/static/' : '/',
};构建与部署
运行 npm run build 后，dist 目录会生成多个 HTML 文件，每个文件对应一个页面。部署时将所有文件上传到服务器即可。
注意事项
- 多页应用会增加构建复杂度，适合需要完全独立页面的场景。
- 共享代码（如公共组件、工具函数）可以放在
src/common目录下。 - 使用多页应用时，页面间跳转可能需要完整的 URL 或服务器配置。
