3-5 情景四：前端Vue项目升级策略&示例
场景描述
本节讨论常见的前端 Vue 项目升级场景。Vue 项目通常使用 Vue CLI（基于 Webpack）或 Vite 构建，升级策略因构建工具不同而有所区别。
Vue CLI 项目的升级策略
Vue CLI 内部的 Webpack 版本
Vue CLI 不同版本对应的 Webpack 版本：
| Vue CLI 版本 | Webpack 版本 | Vue 版本 |
|---|---|---|
| 4.x | Webpack 4 | Vue 2 |
| 5.x | Webpack 5 | Vue 2/3 |
升级 Vue CLI 本身
# 升级 Vue CLI Service
vue upgrade
# 或手动升级
npm install @vue/cli-service@latest --save-dev
bash
从 Vue CLI 迁移到 Vite
对于 Vue 3 项目，从 Vue CLI 迁移到 Vite 是当前更主流的升级路径：
1. 安装 Vite 和 Vue 插件：
npm install vite @vitejs/plugin-vue --save-dev
bash
2. 创建 vite.config.ts：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': '/src'
}
}
})
typescript
3. 修改 index.html 位置：
将 public/index.html 移到项目根目录，并添加 module script：
<script type="module" src="/src/main.js"></script>
html
4. 更新 package.json 脚本：
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
json
5. 处理环境变量：
Vite 使用 import.meta.env 替代 process.env，且环境变量前缀从 VUE_APP_ 改为 VITE_：
// Vue CLI
const api = process.env.VUE_APP_API_URL
// Vite
const api = import.meta.env.VITE_API_URL
javascript
Vue 2 到 Vue 3 的升级要点
如果项目同时需要从 Vue 2 升级到 Vue 3，需要关注以下变化：
1. 破坏性变更
| 变更项 | Vue 2 | Vue 3 |
|---|---|---|
| 全局 API | new Vue() | createApp() |
| 事件总线 | EventBus | mitt 或 pinia |
| 过滤器 | filters 选项 | 计算属性或方法 |
| v-model | value + input | modelValue + update:modelValue |
| 生命周期 | destroyed | unmounted |
| $scopedSlots | this.$scopedSlots | this.$slots |
2. 使用 @vue/compat 过渡
Vue 官方提供了兼容版本，可以在升级过程中逐步迁移：
npm install @vue/compat
bash
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
compatConfig: {
MODE: 2 // 启用 Vue 2 兼容模式
}
}
}
})
]
})
javascript
3. 状态管理升级
| Vue 2 | Vue 3 |
|---|---|
| Vuex 3 | Pinia（推荐）或 Vuex 4 |
new Vuex.Store() | createPinia() |
// Pinia 示例
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia())
typescript
升级策略建议
| 项目状态 | 推荐策略 |
|---|---|
| Vue 2 + Vue CLI | 先升级 Vue CLI 到 5.x（Webpack 5），再考虑 Vue 3 迁移 |
| Vue 3 + Vue CLI | 迁移到 Vite |
| Vue 3 + Vite | 保持 Vite，跟进版本更新 |
| 新项目 | 直接使用 Vite + Vue 3 + Pinia |
参考资源
- Vue 3 迁移指南 - 官方迁移文档
- 从 Vue CLI 迁移到 Vite - Vite 官方指南
- @vue/compat - Vue 兼容版本
↑