Vue 2 项目冷启动太慢？@vitejs/plugin-vue2 使用教程：3 步接入 Vite 提速

Vue 2 项目冷启动太慢？@vitejs/plugin-vue2 使用教程：3 步接入 Vite 提速

【免费下载链接】vite-plugin-vue2Vite plugin for Vue 2.7项目地址: https://gitcode.com/gh_mirrors/vit/vite-plugin-vue2

先讲一个每天都在发生的场景

老项目还在用 webpack？改一行样式，热更新转上十几秒；启动一次开发服务器，够你冲一杯咖啡。这是所有 Vue 2 维护团队都懂的痛。别急着推翻重写——一个 Vite 插件就能让老项目找回新项目的开发体验：@vitejs/plugin-vue2。这份使用教程带你把安装、配置、排错一次跑通，全程不超过十分钟。

为什么选它：三个理由加一张速览

Vue 2 的官方脚手架早已停止迭代，但它仍是海量生产系统的基石。@vitejs/plugin-vue2 的价值，在于把 Vite 的按需编译、闪电热更新原封不动搬进 Vue 2.7 项目。

• 官方出品，血统纯正：由 Vue 核心团队维护，接口与生态无缝衔接，这不是社区野插件能比的。
• 开箱即用：装好依赖、加一行插件注册，原有组件零改动即可运行。
• 能力齐全：模板编译、scoped CSS、CSS Modules、<script setup>、TypeScript、静态资源自动转 ES Module，样样支持。

从零跑通的最小闭环：三步行

第一步，安装依赖。注意版本约束：插件只支持 Vue 2.7.0 及以上版本。

# 安装插件，Vue 2.7+ 已在项目中的话无需重复安装 npm install @vitejs/plugin-vue2

第二步，注册插件。在项目根目录新建或修改vite.config.js：

// vite.config.js import vue from '@vitejs/plugin-vue2' export default { plugins: [vue()] }

第三步，启动并验证。运行npm run dev，终端出现 Vite 的启动横幅、浏览器能正常打开页面并刷新组件不整页跳转，就说明接入成功。之后你还可以跑npm run build确认生产构建无误。

它凭什么这么快：白话拆解两大机制

插件把每个.vue文件当成一台可以随时拆装的机器。它在src/main.ts里把 SFC 解析成模板、脚本、样式三组"零件"，各自独立编译：模板转成渲染函数，脚本用rewriteDefault改写导出，样式按scoped或module属性分派。普通 JS 模板还会被直接内联进主模块，省掉一次额外的网络请求。

热更新更讲究。在src/handleHotUpdate.ts里，插件会拿"上次的零件清单"和"这次的零件清单"逐块比对（isEqualBlock），只把真正变化的那一块替换掉：改样式就只换样式，改模板就只重渲染。这就像修车只换坏掉的轮胎，而不是把整辆车拆了重装。

进阶配置速查表

• template.transformAssetUrls：把模板里的静态资源引用自动转成 ESM 导入，图片、字体的路径问题从此不用手管。场景：项目里资源引用多、路径杂。
• include/exclude：用正则圈定插件只处理哪些文件。场景：项目混用.vue和其他自定义扩展名时，可以精准缩小编译范围、减少无效开销。
• 自定义块：仿照playground/custom/里的写法，给 SFC 增加<i18n>、<docs>之类专属块。场景：要集成国际化或文档生成，属于高级玩法，按需取用。

遇到报错别慌：两个高频问题

Q：控制台总提示 "Vue 2 has reached EOL"，还能用吗？A：能。这是官方对 Vue 2 生命周期结束的例行提示，不影响插件运行。真正要核对的是 vue 版本，必须大于等于 2.7.0，否则语法和编译接口都对不上。

Q：模板里写了<img src="../a.png">，图片就是不显示？A：插件只转换静态字符串形式的资源地址。如果你用了:src动态绑定，就得手动导入：import imgUrl from '../a.png'再绑给变量。另外路径别名记得先在vite.config.js里配好。

接下来，动手试一次

十分钟换来秒级冷启动和精准热更新，这笔账怎么算都划算。现在就把仓库 clone 下来，跑一遍自带的 playground，亲眼看看效果：

# 获取官方示例工程，内含 HMR、CSS Modules、自定义块等全套演示 git clone https://gitcode.com/gh_mirrors/vit/vite-plugin-vue2

老项目也许难改，但开发体验不该将就。用 @vitejs/plugin-vue2 给 Vue 2 项目装上 Vite 引擎，让你维护多年的代码重新跑出第一梯队的速度。

【免费下载链接】vite-plugin-vue2Vite plugin for Vue 2.7项目地址: https://gitcode.com/gh_mirrors/vit/vite-plugin-vue2