vue实现多页面
Vue 实现多页面应用的方法
Vue 通常用于构建单页面应用（SPA），但通过配置可以实现多页面应用（MPA）。以下是具体实现方法：
使用 Vue CLI 配置多页面
修改 vue.config.js 文件，添加 pages 配置项：
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'
}
}
}每个页面需要独立的入口文件（如 main.js）和模板文件（HTML）。
多页面目录结构
推荐的项目目录结构：
src/
├── pages/
│ ├── page1/
│ │ ├── main.js
│ │ ├── App.vue
│ │ └── components/
│ └── page2/
│ ├── main.js
│ ├── App.vue
│ └── components/
public/
├── index.html
└── page2.html动态生成多页面配置
对于大量页面，可动态生成配置：
const glob = require('glob')
const pages = {}
glob.sync('./src/pages//main.js').forEach(path => {
const name = path.split('/')[3]
pages[name] = {
entry: path,
template: `public/${name}.html`,
filename: `${name}.html`
}
})
module.exports = { pages }多页面路由处理
每个页面可拥有独立路由：
// page1/main.js
import Vue from 'vue'
import Router from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
Vue.use(Router)
const router = new Router({
routes: [{ path: '/', component: Home }]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')构建与部署
运行构建命令后，会生成多个 HTML 文件：
npm run build输出目录结构：
dist/
├── index.html
├── page2.html
└── static/注意事项
每个页面的 Vue 应用实例是独立的，无法直接共享状态。如需共享数据，可使用：
- 本地存储（localStorage）
- 服务端存储
- 通过 URL 参数传递
公共依赖可通过 webpack 的 splitChunks 优化：
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
}这种方法适合需要多个独立入口点的项目，如不同功能模块需要完全分离的场景。
