vue实现多页
Vue 实现多页应用的方法
Vue 通常用于单页应用（SPA），但通过配置可以实现多页应用（MPA）。以下是具体实现方法：
修改 webpack 配置
在 vue.config.js 中配置多入口和多模板。假设项目结构包含 page1 和 page2 两个页面：
module.exports = {
pages: {
page1: {
entry: 'src/pages/page1/main.js',
template: 'public/page1.html',
filename: 'page1.html'
},
page2: {
entry: 'src/pages/page2/main.js',
template: 'public/page2.html',
filename: 'page2.html'
}
}
}创建页面目录结构
在 src/pages 下为每个页面创建独立目录，每个页面包含自己的入口文件 main.js 和组件：
src/
pages/
page1/
main.js
App.vue
page2/
main.js
App.vue配置公共模板
在 public 目录下为每个页面创建 HTML 模板文件：
<!-- page1.html -->
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<div id="app"></div>
</body>
</html>路由配置处理
如果使用 Vue Router，需为每个页面单独配置路由：
// page1/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')构建和部署
运行 npm run build 后，会在 dist 目录生成多个 HTML 文件，可直接部署到服务器。
开发环境配置
在开发模式下，可通过不同端口访问各个页面，或使用 vue-cli 的多页模式自动配置。
注意事项
- 公共依赖可通过
splitChunks优化打包体积 - 每个页面的 Vue 实例是独立的
- 静态资源路径需根据部署环境正确配置
通过以上步骤，Vue 项目即可实现多页应用架构，适用于需要独立入口和 SEO 优化的场景。
