vue 如何实现多页面
Vue 多页面应用实现方法
Vue 默认是单页面应用（SPA），但通过配置可以实现多页面应用（MPA）。以下是几种常见方法：
使用 vue.config.js 配置多入口
修改 vue.config.js 文件，配置多个入口文件：
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/page2/main.js）和 HTML 模板。
使用 webpack 配置
对于更复杂的多页面配置，可以直接修改 webpack 配置：
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index'],
filename: 'index.html'
}),
new HtmlWebpackPlugin({
template: 'public/page2.html',
chunks: ['chunk-vendors', 'chunk-common', 'page2'],
filename: 'page2.html'
})
]
}
}路由配置
对于需要不同路由的页面，可以在各自入口文件中配置独立的路由：
// src/page2/main.js
import Vue from 'vue'
import Router from 'vue-router'
import Page2 from './Page2.vue'
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/page2', component: Page2 }
]
})
new Vue({
router,
render: h => h(Page2)
}).$mount('#app')静态资源处理
确保每个页面的静态资源路径正确，可在 vue.config.js 中设置：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/your-project-name/'
: '/'
}构建与部署
运行构建命令后，会生成多个 HTML 文件：
npm run build部署时将所有生成的文件上传到服务器即可，每个页面可通过不同 URL 访问。
注意事项
- 每个页面应有独立的 Vue 实例
- 共享代码可通过提取公共依赖优化
- 开发环境下需正确配置 devServer
- 考虑使用动态导入减少初始加载体积
