vue多页面实现
Vue 多页面实现方法
Vue 默认是单页面应用（SPA），但通过配置可以实现多页面应用（MPA）。以下是具体实现步骤：
配置多页面入口
修改 vue.config.js 文件，配置多个入口文件。每个页面需要独立的入口文件（main.js）和 HTML 模板。
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
│ │ └── components/
│ └── page2/
│ ├── main.js
│ ├── App.vue
│ └── components/
└── assets/路由配置
每个页面可以配置独立的路由。在页面目录下创建路由文件（router.js），并在入口文件中引入。
// src/pages/index/router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
Vue.use(Router);
export default new Router({
routes: [{ path: '/', component: Home }],
});公共依赖处理
为避免重复打包公共依赖（如 Vue、axios），在 vue.config.js 中配置优化：
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
},
},
},
};开发与构建
- 开发模式：运行
npm run serve，访问不同页面需手动输入路径（如http://localhost:8080/page2.html）。 - 生产构建：运行
npm run build，生成多个 HTML 文件，每个文件对应一个页面。
注意事项
- 多页面应用适合项目模块间独立性强的场景，如后台管理系统。
- 页面间共享状态需通过 URL 参数、LocalStorage 或全局事件总线实现。
- 静态资源路径需使用绝对路径，避免因多级目录引发路径错误。
