vue实现多页应用
Vue 实现多页应用的方法
Vue 默认是单页应用（SPA），但通过配置可以支持多页应用（MPA）。以下是实现多页应用的步骤：
修改项目结构
在 src 目录下创建多个入口文件夹，每个文件夹代表一个独立的页面。例如：
src/
├── page1/
│ ├── main.js
│ ├── App.vue
│ └── index.html
└── page2/
├── main.js
├── App.vue
└── index.html配置 vue.config.js
在项目根目录下创建或修改 vue.config.js 文件，配置多入口：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
pages: {
page1: {
entry: 'src/page1/main.js',
template: 'src/page1/index.html',
filename: 'page1.html',
chunks: ['chunk-vendors', 'chunk-common', 'page1']
},
page2: {
entry: 'src/page2/main.js',
template: 'src/page2/index.html',
filename: 'page2.html',
chunks: ['chunk-vendors', 'chunk-common', 'page2']
}
}
})配置公共依赖
如果多个页面需要共享依赖，可以在 vue.config.js 中配置优化选项：
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
automaticNameDelimiter: '~',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
}
}路由配置
每个页面的路由可以独立配置。例如，在 page1 中创建 router.js：
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
const routes = [
{ path: '/', name: 'Home', component: Home }
]
const router = createRouter({
history: createWebHistory('/page1'),
routes
})
export default router构建与部署
运行 npm run build 后，会在 dist 目录下生成多个 HTML 文件，每个文件对应一个页面。部署时将这些文件上传到服务器即可。
动态加载页面
如果需要动态加载页面，可以使用 import() 动态导入：
const loadPage = (pageName) => {
return import(`./pages/${pageName}/main.js`)
}注意事项
- 多页应用会增加构建复杂度，需确保每个页面的依赖和配置正确。
- 公共代码拆分可以优化加载性能。
- 每个页面的路由需独立管理，避免冲突。
通过以上方法，Vue 可以实现多页应用，适合需要独立入口和 SEO 优化的场景。
