如何用 Vite 配置前端多页面应用项目？

如何用 Vite 高效配置前端多页面应用（MPA）项目

在传统的前端开发中,单页面应用（SPA）因其流畅的用户体验而备受青睐，但某些场景下，多页面应用（MPA，Multi-Page Application）因其更好的SEO支持、更快的首屏加载速度及更低的学习成本，仍然是更合适的选择，Vite作为新一代前端构建工具，以其极速的启动速度和高效的热更新著称，本文将介绍如何利用Vite配置一个多页面应用项目。

初始化项目与基础配置

确保你的开发环境已安装Node.js，然后在命令行中执行npm create vite@latest或yarn create vite，选择模板时，根据团队技术栈选择Vue、React或是纯JavaScript项目模板，项目创建完成后，进入项目目录并安装依赖。

如何用 Vite 配置前端多页面应用项目？

Vite天生支持多页面配置,关键在于vite.config.js（或vite.config.ts）文件的设置，你需要修改build.rollupOptions.input来指定多个入口文件，如果你的项目有两个页面——主页（index.html）和关于页（about.html），对应的入口脚本分别为main.js和about.js，配置如下：

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: './src/main.js', // 主页入口
        about: './src/about.js' // 关于页入口
      }
    }
  }
});

组织项目结构

为了更好地管理多页面应用,建议将每个页面的资源（HTML、JS、CSS）放在独立的文件夹中。

src/
  ├── pages/
  │   ├── home/
  │   │   ├── index.html
  │   │   └── main.js
  │   └── about/
  │       ├── index.html
  │       └── about.js

相应地,调整vite.config.js中的input路径，指向每个页面的JS入口文件。

公共模块与代码复用

多页面应用同样需要复用公共代码,如组件库、工具函数等，可以通过以下方式实现：

提取公共依赖：利用Rollup的output.globals或插件（如@rollup/plugin-commonjs）来管理外部依赖，减少重复打包。
共享组件：创建一个components目录，存放可复用的UI组件，通过ES模块导入到各个页面中使用。
样式复用：使用CSS预处理器（如Sass、Less）或CSS Modules来共享样式变量和混合宏。