当前位置：首页 > VUE

vue多页面实现

2026-02-18 19:44:36VUE

Vue 多页面应用（MPA）实现方法

Vue 默认是单页面应用（SPA），但通过配置可以实现多页面应用（MPA）。以下是具体实现方法：

修改项目结构

在 src 目录下创建多个页面文件夹，每个文件夹包含入口文件 main.js 和模板文件 App.vue。例如：

src/
  ├── page1/
  │   ├── App.vue
  │   ├── main.js
  │   └── index.html
  ├── page2/
  │   ├── App.vue
  │   ├── main.js
  │   └── index.html

配置 vue.config.js

在项目根目录下创建或修改 vue.config.js 文件，配置多页面入口：

const path = require('path')
const glob = require('glob')

function getEntries(pattern) {
  const entries = {}
  glob.sync(pattern).forEach(file => {
    const name = file.split('/')[1]
    entries[name] = {
      entry: `src/${name}/main.js`,
      template: `src/${name}/index.html`,
      filename: `${name}.html`
    }
  })
  return entries
}

module.exports = {
  pages: getEntries('src/*/main.js'),
  outputDir: 'dist',
  filenameHashing: true
}

创建页面模板

在每个页面目录下创建 index.html 模板文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

配置路由

如果需要在多页面应用中使用 Vue Router，需要在每个页面的 main.js 中单独配置：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

构建与部署

运行构建命令后，会在 dist 目录下生成多个 HTML 文件：

npm run build

公共代码提取

为优化性能，可以在 vue.config.js 中配置公共代码提取：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendors: {
            name: 'vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          common: {
            name: 'common',
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

开发环境配置

在开发环境中，可以通过指定页面名称来单独运行某个页面：

vue-cli-service serve --page page1

或者在 package.json 中配置脚本：

{
  "scripts": {
    "serve:page1": "vue-cli-service serve --page page1",
    "serve:page2": "vue-cli-service serve --page page2"
  }
}

注意事项

每个页面是独立的 Vue 应用，共享的组件和工具需要单独处理
页面间跳转需要使用传统的 <a> 标签或 window.location
公共依赖可以通过 webpack 的 splitChunks 优化
静态资源路径需要正确配置，避免页面间资源冲突

替代方案

如果项目复杂度较高，可以考虑以下替代方案：

使用微前端架构

通过 qiankun 或 single-spa 等微前端框架，将多个 Vue 应用集成在一起。

使用动态导入

在 SPA 中通过路由懒加载实现类似多页面的效果：

const routes = [
  {
    path: '/page1',
    component: () => import('./pages/page1/App.vue')
  },
  {
    path: '/page2',
    component: () => import('./pages/page2/App.vue')
  }
]