vue vite 多页面应用与vue cli多页面应用 (MPA)及其比较(避坑)

'# vue vite 多页面应用与vue cli多页面应用 (MPA)及其比较(避坑)

一、背景与问题

在现代前端开发中，多页面应用（Multi-Page Application, MPA）是一种常见架构模式。与单页应用（SPA）相比，MPA具有独立的页面URL结构，每个页面通过独立的HTML文件加载，适合需要SEO优化、页面间数据隔离或传统企业级应用的场景。

但MPA在开发中常面临以下挑战：

1. 页面间资源复用困难
2. 构建配置复杂度高
3. 开发体验差异大
4. 性能优化需求特殊

本文将深入分析Vue CLI和Vite两种主流工具创建MPA的实现原理，对比其技术差异，并提供完整的开发方案。

二、基本原理

1. Vue CLI多页面应用原理

Vue CLI通过Webpack配置实现MPA。其核心机制是：

• 每个页面对应一个独立的入口文件（如src/page1/main.js）
• 使用pages配置项定义多个页面入口
• 通过public目录管理静态资源
• 构建时为每个页面生成独立的HTML文件

2. Vite多页面应用原理

Vite基于ES模块的开发模式，其MPA实现原理：

• 通过vite.config.js配置多个入口点
• 使用import.meta.glob动态加载页面模块
• 支持按需加载和代码分割
• 构建时生成独立的HTML文件和静态资源

三、环境准备

1. Vue CLI项目创建

npm create vue@latest
# 选择多页面应用模板

2. Vite项目创建

npm create vite@latest
# 选择Vue模板
# 然后选择多页面应用配置

四、核心实现

1. Vue CLI多页面配置（vue.config.js）

module.exports = {
  pages: {
    index: {
      entry: 'src/index/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    about: {
      entry: 'src/about/main.js',
      template: 'public/about.html',
      filename: 'about.html'
    }
  }
}

关键点说明：

• pages对象定义每个页面的配置
• entry指定入口文件
• template指定HTML模板
• filename控制输出文件名
• 每个页面独立构建，互不干扰

2. Vite多页面配置（vite.config.js）

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        main: './index.html',
        about: './about.html'
      }
    }
  }
});

关键点说明：

• input对象定义多个入口文件
• 支持动态加载页面模块
• 可结合import.meta.glob实现动态路由
• 构建时自动生成对应HTML文件

3. 动态路由实现（Vite示例）

// src/router.js
export default function createRouter() {
  const routes = import.meta.glob('./pages/*.vue', { eager: true });
  return Object.entries(routes).map(([path, component]) => ({
    path: path.replace('./pages/', '').replace('.vue', ''),
    component
  }));
}

关键点说明：

• 使用import.meta.glob动态加载页面组件
• eager: true立即加载所有匹配文件
• 生成路由配置数组
• 可结合Vue Router实现动态路由

五、完整案例

1. 电商类项目结构（Vite版本）

project-root/
├── index.html
├── about.html
├── src/
│   ├── pages/
│   │   ├── index.vue
│   │   └── about.vue
│   └── router.js
├── vite.config.js
└── package.json

2. 主页组件（index.vue）

<template>
  <div>
    <h1>首页</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

3. 关于页组件（about.vue）

<template>
  <div>
    <h1>关于</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'AboutPage'
}
</script>

4. 路由配置（router.js）

export default function createRouter() {
  const routes = import.meta.glob('./pages/*.vue', { eager: true });
  return Object.entries(routes).map(([path, component]) => ({
    path: path.replace('./pages/', '').replace('.vue', ''),
    component
  }));
}

5. 主入口（main.js）

import { createRouter } from './router';
import { createApp } from 'vue';

const app = createApp({});

const router = createRouter();
app.use(router);

app.mount('#app');

六、源码解析

1. Vite构建流程分析

Vite在构建MPA时的核心流程：

1. 读取vite.config.js中的input配置
2. 为每个入口文件创建独立的构建上下文
3. 使用Rollup进行代码分割和资源优化
4. 生成对应的HTML文件和静态资源

2. Vue CLI构建流程分析

Vue CLI构建MPA时的特殊处理：

• 为每个页面创建独立的Webpack配置
• 使用copy-webpack-plugin复制静态资源
• 通过html-webpack-plugin生成HTML文件
• 自动处理页面间资源引用

七、进阶使用

1. 动态页面生成

// utils.js
export function generatePages() {
  const pages = ['home', 'about', 'contact'];
  return pages.map(page => ({
    name: page,
    entry: `src/pages/${page}.vue`,
    template: `public/${page}.html`
  }));
}

2. 资源共享方案

// shared.js
export const sharedData = {
  siteName: 'MySite',
  logo: '/logo.png'
};

3. 服务端渲染 (SSR) 集成

// server.js
const { createServer } = require('vite');
const { createRenderer } = require('vue-server-renderer');

const app = createServer({
  app: () => {
    return {
      entry: 'src/main.js',
      plugins: [vue()]
    };
  }
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

八、性能与工程实践

1. 性能优化策略

2. 安全注意事项

• 静态资源路径安全：确保public目录不暴露敏感文件
• 防止XSS攻击：使用vite-plugin-sanitize-html插件过滤HTML内容
• 防止CSRF攻击：在服务端验证请求来源

3. 异常处理机制

// error.js
export function handleErrors() {
  window.onerror = (message, source, lineno, colno, error) => {
    console.error('Global error:', message, error);
    // 记录错误日志
    return true;
  };
}

九、常见问题与踩坑

1. 常见错误及解决办法

2. 特殊场景处理

问题：多页面间共享状态

// shared.js
let sharedData = {
  user: null
};

export function setSharedData(data) {
  sharedData = { ...sharedData, ...data };
}

export function getSharedData() {
  return sharedData;
}

解决办法：

• 使用全局状态管理库（如Vuex）
• 使用window对象共享数据
• 使用服务端共享状态（SSR场景）

十、最佳实践

1. 推荐方案

2. 开发规范建议

• 使用@/作为全局路径别名
• 遵循pages/目录结构
• 使用vite-plugin-eslint进行代码规范检查
• 使用vite-plugin-visualizer分析资源使用情况

十一、总结

Vue CLI和Vite在创建多页面应用时存在本质差异：Vue CLI基于Webpack的静态资源管理，而Vite基于ES模块的动态加载机制。两者各有优势，Vite在开发体验和性能上更具优势，但需要更精细的资源管理。

在实际项目中，建议：

• 选择Vite进行新项目开发（特别是需要热更新的场景）
• 使用Vue CLI进行传统企业级应用改造
• 对于需要动态路由的场景，优先考虑Vite的import.meta.glob特性
• 避免在SPA场景中使用MPA架构，除非有特殊需求

开发过程中要特别注意静态资源路径、页面间状态共享和构建配置的合理性。通过合理配置和性能优化，可以充分发挥MPA架构的优势，同时避免常见的开发陷阱。