vue实现多页面
Vue 实现多页面的方法
Vue 默认是单页面应用（SPA），但通过配置可以实现多页面应用（MPA）。以下是具体实现方式：
修改 webpack 配置
在 vue.config.js 中配置多个入口文件：
module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html',
},
page2: {
entry: 'src/pages/page2/main.js',
template: 'public/page2.html',
filename: 'page2.html',
}
}
}目录结构调整
创建多页面目录结构，每个页面有独立入口：
src/
pages/
index/
main.js
App.vue
page2/
main.js
App.vue路由配置
每个页面使用独立的路由配置：
// src/pages/index/router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})构建配置优化
在 vue.config.js 中添加 chunk 配置避免重复打包：
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
}
}Nginx 配置
部署时需要配置 Nginx 正确处理多个页面：
location / {
try_files $uri $uri/ /index.html;
}
location /page2 {
try_files $uri $uri/ /page2.html;
}开发环境测试
运行开发服务器并验证多页面：
npm run serve访问 http://localhost:8080/index.html 和 http://localhost:8080/page2.html 测试不同页面。
静态资源处理
确保静态资源路径正确，可在 vue.config.js 中设置：
publicPath: process.env.NODE_ENV === 'production'
? '/your-project-name/'
: '/'生产环境构建
构建时会产生多个 HTML 文件：
npm run build构建结果会在 dist 目录下生成 index.html 和 page2.html 等多个页面文件。
注意事项
- 每个页面的 Vue 实例是独立的
- 共享组件需放在公共目录
- 公共依赖要合理拆分避免重复打包
- 页面间跳转需使用
<a>标签而非<router-link>
这种方法适合需要 SEO 优化或功能隔离的项目，但会增加构建复杂度和包体积。
