Vite 7 升级指南 new

概述

本次升级将项目从 Vite 5 迁移到 Vite 7，以充分利用最新的功能和性能改进。同时适配 pnpm 10。

相关链接： Overseas MR #40

核心变更

依赖升级

依赖包	旧版本	新版本	说明
vite	5.2.11	7.1.5	主框架升级
@vitejs/plugin-vue2	-	-	替换为 @cdlab996/plugin-vue2
@vitejs/plugin-vue2-jsx	-	-	替换为 @cdlab996/plugin-vue2-jsx
sass	1.32.13	1.71.1	适配 Vite 7 要求
unocss	0.60.3	66.5.1	升级到最新版本
@vueuse/core	10.10.0	^11	Vue 2.7 兼容的最高版本

新增依赖

• vue-demi (0.14.10): 解决 pnpm@10 兼容性问题

环境要求

Node.js 版本要求

Vite 7 要求 Node.js 版本 20.19+ 或 22.12+

推荐版本： 目前 Jenkins 测试环境与生产环境使用的版本为 22.17.1(LTS)，建议本地开发环境统一升级到该版本。

关键配置调整

1. 插件替换

由于官方 Vite Vue2 插件在 Vite 7 中不再维护，需要使用个人维护的替代插件：

# 移除旧插件
pnpm remove @vitejs/plugin-vue2 @vitejs/plugin-vue2-jsx

# 安装新插件
pnpm add -D @cdlab996/plugin-vue2 @cdlab996/plugin-vue2-jsx

2. vue-demi 配置

在 vite.config.js 中添加 alias 配置，解决 pnpm 10 的依赖解析问题：

vite.config.js

import path from 'node:path'
import { defineConfig, loadEnv } from 'vite'
import createVitePlugins from './vite/plugins'

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())

  return {
    // ...其他配置

    resolve: {
      alias: {
        vue: 'vue/dist/vue.esm.js',
        'vue-demi': 'vue-demi/lib/v2.7/index.mjs', 
        '@': path.resolve(__dirname, './src'),
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    },
  }
})

3. package.json 配置

package.json

{
  "engines": {
    "node": ">=20.19.0 || >=22.12.0"
  },
  "dependencies": {
    "@vueuse/core": "^11"
  },
  "devDependencies": {
    "@cdlab996/plugin-vue2": "0.0.2",
    "@cdlab996/plugin-vue2-jsx": "0.2.0",
    "sass": "1.71.1",
    "unocss": "66.5.1",
    "vite": "7.1.5",
    "vue-demi": "0.14.10"
  }
}

注意事项

1. @vueuse/core 版本锁定: Vue 2.7 项目仅支持 v11 版本，不可继续升级
2. sass 版本要求: 必须升级到 ^1.71.1，否则会出现编译错误
3. 插件来源: 新的 Vue2 插件由个人维护

升级步骤

1. 确认 Node.js 版本符合要求
2. 更新 package.json 中的依赖版本
3. 运行 pnpm install 安装新依赖
4. 更新 vite.config.js 配置
5. 测试项目编译和运行

常见问题

Q: 升级后项目无法启动？
A: 检查 Node.js 版本是否符合要求，确认 vue-demi alias 配置是否正确

Q: sass 编译报错？
A: 确保 sass 版本已升级到 1.71.1 或更高版本

Q: 找不到 @vitejs/plugin-vue2？
A: 该插件已被替换，请使用 @cdlab996/plugin-vue2