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/page2/main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')创建多个 HTML 模板
在 public 目录下创建对应的 HTML 文件：
public/page2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page 2</title>
</head>
<body>
<div id="app"></div>
</body>
</html>配置路由
如果需要在多页面间跳转，可以使用常规的 <a> 标签：
<a href="/page2.html">Go to Page 2</a>构建和部署
运行 npm run build 会生成多个 HTML 文件：
dist/
index.html
page2.html
js/
app.js
page2.js注意事项
每个页面是独立的 Vue 应用，共享状态需要使用 localStorage 或服务端存储。
页面间跳转会触发完整页面刷新，不是 SPA 的无刷新体验。
适合需要完全独立页面或 SEO 要求的场景。
