Vue3+Vite单页应用改造多页架构实战

1. 项目背景与需求解析

最近接手了一个Vue3+Vite的单页面应用（SPA）改造项目，需要将其重构为多页面应用（MPA）。这个需求在传统企业级项目中其实很常见——当系统功能模块逐渐增多，不同业务线需要独立部署时，SPA的局限性就显现出来了。

我遇到的具体情况是：原系统包含用户中心、订单管理、商品后台三个主要模块，随着业务发展，每个模块都变得非常庞大。开发团队经常遇到这些问题：

• 热更新速度越来越慢，修改一个组件要等10秒以上
• 生产环境构建的chunk文件超过5MB
• 不同团队协作时频繁出现代码冲突
• 客户要求能单独部署商品模块

经过技术评估，我们决定保留Vue3的现代化开发体验，同时通过Vite的MPA支持来解决这些问题。下面分享具体改造过程。

2. 多页面架构设计

2.1 目录结构调整

首先创建新的pages目录存放各页面入口：

code复制src/
  pages/
    user/          # 用户中心模块
      index.html
      main.ts
      App.vue
    order/         # 订单模块
      index.html
      main.ts
      App.vue
    product/       # 商品模块
      index.html  
      main.ts
      App.vue
  shared/          # 公共代码
    components/
    utils/
    styles/

关键点说明：

• 每个页面有自己独立的Vue应用实例
• 公共代码抽离到shared目录避免重复
• 静态资源仍放在assets目录统一管理

2.2 Vite配置改造

修改vite.config.ts支持多入口：

typescript复制import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// 自动扫描pages目录下的入口文件
const getPages = () => {
  return {
    user: resolve(__dirname, 'src/pages/user/index.html'),
    order: resolve(__dirname, 'src/pages/order/index.html'),
    product: resolve(__dirname, 'src/pages/product/index.html')
  }
}

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: getPages(),
      output: {
        chunkFileNames: 'shared/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash][extname]'
      }
    }
  }
})

特别注意：

• output配置确保公共chunk能被正确复用
• 每个页面会生成独立的HTML和JS入口
• 开发模式下仍支持HMR

3. 核心改造步骤

3.1 路由系统改造

原SPA使用的是vue-router，改造后每个模块需要自己的路由实例：

typescript复制// src/pages/user/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

export default createRouter({
  history: createWebHistory('/user'),
  routes: [
    {
      path: '/profile',
      component: () => import('../views/Profile.vue')
    }
    // 其他用户模块路由...
  ]
})

关键调整：

• 路由base需要与页面路径匹配
• 取消全局路由守卫，改为模块内控制
• 使用动态导入实现按需加载

3.2 状态管理方案

原项目的Pinia store需要重新组织：

code复制src/
  shared/
    stores/
      auth.ts     # 认证相关
      common.ts   # 公共状态
  pages/
    user/
      stores/     # 用户模块专属store
        preferences.ts

使用建议：

• 跨模块共享的store放在shared目录
• 模块专属store就近管理
• 避免直接修改其他模块的store

3.3 公共组件处理

将通用组件提取到shared目录：

vue复制// src/shared/components/BaseButton.vue
<script setup>
defineProps({
  type: { type: String, default: 'default' }
})
</script>

<template>
  <button :class="['btn', `btn-${type}`]">
    <slot />
  </button>
</template>

使用alias简化引用：

typescript复制// vite.config.ts
resolve: {
  alias: {
    '@shared': resolve(__dirname, 'src/shared')
  }
}

4. 构建优化实践

4.1 代码分割策略

通过manualChunks优化分包：

typescript复制// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vue: ['vue', 'vue-router', 'pinia'],
        ui: ['element-plus', 'vant'],
        utils: ['lodash', 'dayjs']
      }
    }
  }
}

效果对比：

• 改造前：单chunk 5.2MB
• 改造后：最大chunk 1.8MB
• 冷启动时间减少40%

4.2 开发体验优化

配置dev server支持多入口访问：

typescript复制server: {
  proxy: {
    '/user': { target: 'http://localhost:3000/user.html' },
    '/order': { target: 'http://localhost:3000/order.html' }
  }
}

这样可以通过：

• http://localhost:3000/user.html
• http://localhost:3000/order.html
  直接访问不同模块

5. 常见问题解决方案

5.1 样式冲突问题

现象：不同模块的样式互相影响

解决方案：

1. 使用scoped样式

vue复制<style scoped>
/* 模块私有样式 */
</style>

2. CSS Modules配置

typescript复制// vite.config.ts
css: {
  modules: {
    localsConvention: 'camelCase'
  }
}

5.2 静态资源引用

错误做法：

html复制<img src="../assets/logo.png" />

正确方式：

html复制<!-- 使用绝对路径 -->
<img src="/assets/logo.png" />

<!-- 或import方式 -->
<script setup>
import logo from '@shared/assets/logo.png'
</script>

<template>
  <img :src="logo" />
</template>

5.3 环境变量管理

建议方案：

code复制.env                # 全局变量
.env.user           # 用户模块变量 
.env.order          # 订单模块变量

访问方式：

typescript复制const apiUrl = import.meta.env.VITE_API_URL

6. 部署方案调整

6.1 Nginx配置示例

nginx复制server {
  listen 80;
  
  location /user {
    alias /var/www/html/user;
    try_files $uri /user.html;
  }

  location /order {
    alias /var/www/html/order;
    try_files $uri /order.html;
  }
}

6.2 CI/CD改造

关键调整点：

• 为每个模块创建独立构建任务
• 支持模块单独部署
• 共享依赖单独构建缓存

示例命令：

bash复制# 单独构建用户模块
vite build --config vite.user.config.ts

# 构建所有模块
vite build --mode=production

7. 改造效果评估

经过两周的改造，系统获得了显著改进：

1. 开发效率提升

• 热更新速度从8s降到2s
• 构建时间减少35%

2. 运行性能优化

• 首屏加载时间减少40%
• 内存占用降低25%

3. 工程化改进

• 各模块可独立迭代
• 支持灰度发布
• 错误监控更精准

这次改造最大的收获是：Vite的MPA支持比预想的要完善很多，配合Vue3的composition API，既能享受现代前端开发的便利，又能满足复杂业务场景的架构需求。对于正在面临类似挑战的团队，不妨参考这个方案进行尝试。