说实话，Ru果你还在忍受那种改一行代码就要等半天才Neng在浏览器kan到效果的开发体验，那你真的该升级一下你的工具箱了。在如今这个快节奏的前端世界里效率就是生命。今天我想和大家聊聊如何用目前Zui火的组合——Vite 和 Vue 3，来搭建一个所谓的“多页面路由项目”。这里有个hen有趣的误区，hen多人一听到“多页面”，脑子里想的就是好几个 HTML 文件在那儿跳来跳去。其实吧，在现代 Vue 开发中，我们通常说的多页面应用体验，往往还是基于单页应用的架构实现的。别急，咱们慢慢拆解，kankan这背后的魔法到底是怎么运作的。

在正式动手写代码之前，咱们得先明白为什么大家dou往 Vite 这边倒戈。以前用 Webpack 的时候，启动一个大型项目，尤其是那种企业级后台，你Ke以有时间去接杯水、刷个短视频，甚至还Neng思考一下人生。等它终于打包完了你的灵感可Nengdou没了。

Vite 完全不一样。它的核心秘密在于它利用了浏览器原生支持的 ES Modules。在开发模式下Vite 根本就不打包！没错，它就是起一个本地服务器，浏览器请求哪个模块，它就实时转化哪个模块。这就好比去餐厅吃饭，以前是先把所有菜douZuo好了端上来现在是现点现Zuo。

这就引出了一个超级丝滑的特性：热模块替换。当你修改了文件里的某个变量或者样式，Vite 底层的文件监听器会立刻捕捉到这个变化。它不会傻乎乎地刷新整个页面而是通过 WebSocket 建立一条私密通道，只把发生变动的那个模块推送给浏览器。浏览器收到后就像换魔术一样，只替换掉那一小块内容。这就是为什么 Vite 的热geng新Neng达到毫秒级，哪怕项目再大，操作起来也像涂了黄油一样顺滑。

你Ke以把这种加载机制想象成一张精密的蜘蛛网。浏览器就是那只蜘蛛，它根据实际的依赖关系和路由需求，一层一层地去拉取它需要的模块。没用到的代码？根本就不会去请求！这就是“按需加载”的精髓。相比之下传统工具那种把所有代码dou塞进一个大 bundle.js 的Zuo法，简直就像是在搬运石头，笨重又缓慢。

废话不多说咱们直接上手。虽然你Ke以自己配置 webpack 或者 rollup，但为了不把头发掉光，我强烈建议直接使用官方脚手架。打开你的终端，输入以下命令：

npm init vite@latest my-vue-app

当然Ru果你喜欢 yarn 或者 pnpm 也dou没问题。执行完命令后你会被提示选择框架，这里毫不犹豫地选 Vue，然后选 Vue 还是 Vue + TypeScript 就kan你的个人喜好了。为了演示方便，咱们先用纯 JS 版本。

进入项目目录，安装依赖，然后启动开发服务器：

cd my-vue-app
npm install
npm run dev

这时候，你应该Nengkan到 Vite 那个熟悉的绿色界面了。是不是快得惊人？这就是现代开发该有的样子。

打开编辑器，咱们来kankan生成的文件结构。这里有几个关键角色你得认识一下：

index.html这可是整个项目的“根”。跟 Vue CLI 不一样，Vite 把这个文件放在了根目录下。注意kan里面的 ，这就是利用 ESM 的关键入口。浏览器加载完 HTML 后会直接去请求 main.js 这个模块。

package.json老熟人了管理依赖和脚本命令的地方。

public这里放的是静态资源，比如 favicon.ico 或者一些不需要经过 Vite 处理的图片。打包的时候，它们会被原封不动地复制到 dist 目录下。

src咱们的主战场。

main.js应用的入口文件。它的任务是创建 Vue 实例，并把它挂载到 HTML 里的那个 #app 节点上。

App.vue根组件。你Ke以把它理解为整个应用的“外壳”，通常这里会放一些通用的布局，比如导航栏、页脚，以及Zui重要的——路由出口。

assets放那些会被 webpack/Vite 处理的资源，比如 CSS、图片等。

components放一些可复用的公共组件。

现在项目虽然跑起来了但只有一个页面。要实现“多页面”的体验，我们需要引入 Vue Router。这就是 Vue 官方的路由管理器，它就像是一个精明的前台接待，负责指挥用户去哪里以及该kan什么内容。

先安装一下：

npm install vue-router@4

装好之后咱们在 src 目录下新建一个 router 文件夹，里面再建个 index.js。这就是路由配置的大本营。

打开 src/router/index.js，咱们来写点配置。 得引入 createRouter 和 createWebHistory。然后我们需要定义页面组件。为了演示，咱们先在 src 下建个 views 文件夹，专门放页面级组件，里面新建 Home.vue 和 About.vue。

路由配置代码大概长这样：

// 引入路由创建函数和模式
import { createRouter, createWebHistory } from 'vue-router';
// 引入页面组件
import Home from '../views/Home.vue';
import About from '../views/About.vue';
// 定义路由映射表
const routes = ;
// 创建路由实例并导出
const router = createRouter({
  // 使用 HTML5 History 模式，URL 比较好kan，没有 # 号
  history: createWebHistory,
  routes // 路由配置数组
});
export default router;

这里有几个细节值得唠叨两句。关于 path，它决定了“用户访问什么地址时触发这个路由”。而 component 则决定了“访问这个路径时显示哪个页面内容”。至于 name，虽然不是强制的，但给路由起个名字是个好习惯，以后在代码里跳转时写 { name: 'About' } 比写硬编码的路径要优雅得多，也geng容易维护。

刚才代码里用了 createWebHistory，这会生成像 http://localhost:3000/about 这样干净的 URL。这种模式对 SEO 友好，kan起来也geng像传统的网站。但是它有个坑：因为这是单页应用，服务器上其实并没有 /about 这个物理文件。Ru果你直接在浏览器地址栏回车，或者刷新页面服务器会一脸懵逼地给你返回 404。

所以Ru果你用这种模式，部署的时候得配置服务器，让所有请求dou fallback 回 index.html。

Ru果你不想折腾服务器配置，或者只是Zuo个简单的 Demo，那就用 createWebHashHistory。这会让 URL 变成 http://localhost:3000/#/about。虽然多了个丑丑的 # 号，但兼容性极好，随便扔到 GitHub Pages 或者静态空间上douNeng跑，不用担心刷新 404 的问题。

路由配置好了现在得把它塞进 Vue 应用里。回到 src/main.js，把创建好的 router 挂载上去。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由配置
import './style.css'
const app = createApp
// 使用路由插件
app.use
// 挂载到 #app
app.mount

接下来是Zui关键的一步：修改 App.vue。这里就是展示“单页应用”精髓的地方了。

kan到那个 了吗？这就是个占位符，或者你Ke以把它想象成一个展示柜。当你点击导航栏的链接时URL 变了Vue Router 会根据当前的 URL 去路由表里找匹配的组件。找到了就把这个组件塞进这个展示柜里。

整个过程页面是不刷新的！只有展示柜里的内容换了外面的导航栏、Footer 等公共部分纹丝不动。这就是为什么我们说它只有一个 HTML 文件，却Neng给用户带来多页面浏览的错觉。

咱们再深挖一下底层的逻辑，这样你出了问题才知道去哪儿找原因。

当浏览器加载 index.html 后会解析到 。因为加了 type="module"，浏览器知道这是个 ES Module，于是它发起请求去拿 main.js。

Vite 的开发服务器收到请求后会实时把代码转化一下返回给浏览器。浏览器拿到 main.js 后发现里面有一堆 import 语句，比如 import App from './App.vue'。于是浏览器又会立刻去请求这些被导入的模块。这一层一层的依赖关系，就像剥洋葱一样，直到所有需要的模块dou加载完毕。

这就是为什么 Vite 开发环境下启动快——它不需要预先打包分析整个依赖树，用到什么加载什么。而到了生产环境构建时Vite 会使用 Rollup 进行打包，那时候就会Zuo Tree-shaking，把没用到的代码摇掉，生成体积Zui小化、性NengZui优的静态资源。

在搭建过程中，有几个坑是新手特别容易踩的，这里特意提个醒。

是端口占用。Vite 默认用 3000 端口，Ru果被占用了它会自动尝试下一个端口。但有时候你可Neng会因为缓存或者配置问题连不上。这时候，Ke以在 vite.config.js 里手动指定 server.port。

然后是组件路径。在配置路由时引入组件的路径一定要写对。Ru果你用了 @/views/Home.vue 这种别名，记得在 vite.config.js 里配置好 resolve.alias，否则 Vite 可不认识 @ 是啥。

Zui后关于多入口。虽然我们今天讲的是 SPA 路由，但Ru果你真的需要那种传统的多页面应用，Vite 也是支持的。这就需要你在 vite.config.js 里配置 build.rollupOptions.input，指定多个入口文件。不过对于大多数现代 Web 应用来说SPA + Vue Router 的方案Yi经足够强大了没必要为了所谓的“多页面”去增加构建的复杂度。

通过这篇文章，我们从 Vite 的极速原理出发，一步步搭建了一个带路由的 Vue 3 项目。核心其实就是理解 ESM和 HMR这套现代前端的逻辑。一旦你习惯了这种开发模式，再回头kan以前那种笨重的打包工具，真的就回不去了。

Vue 3 的 Composition API 加上