Vite5 升级到 Vite6

公司项目风险评估发现vite5存在安全漏洞，需要升级高版本

升级依赖

"vite": "^6.2.4"

在 package.json中添加 "type": "module"

升级 vitejs/plugin-vue，vitejs/plugin-vue-jsx

"@vitejs/plugin-vue": "^5.2.4",
    "@vitejs/plugin-vue-jsx": "^4.1.2",

将 rollup-plugin-compression删除并更换为 vite-plugin-compression

import compression from 'vite-plugin-compression'

...
plugins: [
  ...
  compression()
]
...

并修改 esbuild配置

import compression from 'vite-plugin-compression'

...
esbuild: {
  // pure: __DEV__ ? ['console.log', 'debugger'] : [] // 在vite 6.0.6以前
  drop: ['console', 'debugger']  // 在vite 6.0.6及后续版本的配置
},
...

常见依赖错误

运行<font style="background-color:rgb(255,245,235);">npm i</font>, 查看终端是否有报错

如果用到以下依赖也需要升级（以下不包含的依赖如果报错，则在npm查询升级到最新，若是依旧报错需考虑更换依赖或者放弃升级）

"vite-plugin-pages": "^0.33.0"

1、vite-plugin-monaco-editor

有用到 vite-plugin-monaco-editor依赖可以在 package.json与 vite.config.ts删除相应配置

2、vite-plugin-vue-layouts

舍弃 vite-plugin-vue-layouts使用 vite-plugin-vue-layouts-next

npm install -D vite-plugin-vue-layouts-next

添加到 vite.config.js ：

import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts-next'
export default {plugins: [Vue(), Pages(), Layouts()],}

3、报错ERROR: Expected identifier but found "debugger"

修改 vite.config.ts中的esbuild ：代码