vue如何实现多页
Vue 实现多页应用的方法
Vue 默认是单页应用（SPA），但通过配置可以实现多页应用（MPA）。以下是具体实现方式：
修改 webpack 配置
在 vue.config.js 中配置多入口：
const path = require('path')
module.exports = {
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
},
page2: {
entry: 'src/page2/main.js',
template: 'public/page2.html',
filename: 'page2.html'
}
}
}创建多个入口文件
为每个页面创建独立的入口文件：
src/
├── main.js # 主入口
├── App.vue # 主组件
├── page2/
│ ├── main.js # 页面2入口
│ └── App.vue # 页面2组件配置路由分离
每个页面使用独立的路由配置：
// src/page2/main.js
import Vue from 'vue'
import Page2App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(Page2App)
}).$mount('#app')构建输出
运行构建命令后会在 dist 目录生成多个 HTML 文件：
dist/
├── index.html
└── page2.html开发环境配置
确保开发服务器能正确访问多页面：
// vue.config.js
module.exports = {
devServer: {
historyApiFallback: {
rewrites: [
{ from: /^\/page2/, to: '/page2.html' }
]
}
}
}静态资源处理
公共依赖可以提取到公共 chunk：
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
}注意事项
- 每个页面需要独立的 Vue 实例
- 共享代码可以通过提取公共模块优化
- 页面间跳转需要使用传统的链接方式（
<a>标签） - 生产环境部署需要服务器正确配置多页面路由
这种方式适合需要完全独立页面的场景，如不同功能模块需要独立部署的情况。
