vue如何实现多页面简单实现
使用 Webpack 配置多入口
在 Vue 项目中，通过修改 vue.config.js 文件配置多入口。每个入口对应一个独立的 HTML 页面。示例配置如下：
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），结构与默认的 src/main.js 类似：
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')配置独立模板文件
在 public/ 目录下为每个页面创建独立的 HTML 模板文件（如 page2.html），内容参考默认的 index.html：
<!DOCTYPE html>
<html>
<head>
<title>Page2</title>
</head>
<body>
<div id="app"></div>
</body>
</html>路由配置隔离
若需要路由功能，建议每个页面使用独立的路由配置文件。例如为 page2 创建 src/page2/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 }
]
})构建与访问
运行 npm run build 后会生成多个 HTML 文件。访问时直接打开对应的 HTML 文件即可：
- 主页面：
dist/index.html - 子页面：
dist/page2.html
