快速迁移旧 Webpack 项目到 Vite 的核心是“换引擎、保结构、修接口”，需清除 Webpack 依赖、复用目录结构、精准适配路径与环境，1 小时内可完成基础可用版本。
快速迁移旧 Webpack 项目到 Vite，核心不是重写代码，而是“换引擎、保结构、修接口”。重点在于清除残留依赖、复用现有目录、精准适配路径与环境，整个过程可控制在1小时内完成基础可用版本。
清理依赖并安装 Vite 生态
进入项目根目录，先卸载所有 Webpack 相关构建依赖，避免启动冲突：
-
必须移除：
webpack、webpack-cli、webpack-dev-server、html-webpack-plugin、@vue/cli-service（Vue CLI 项目） -
按需安装：
vite+ 对应框架插件（Vue 3 用@vitejs/plugin-vue；Vue 2 用vite-plugin-vue2；React 用@vitejs/plugin-react） - 如项目含 CommonJS 第三方库（如
moment、@ant-design/charts），额外加装vite-plugin-commonjs或配置optimizeDeps.include
重配 vite.config.js 并对齐别名与代理
新建 vite.config.js，关键配置不能靠猜，要照搬原有习惯：
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
-
alias 必须用
path.resolve()：写'@': './src'会导致热更新失效；正确写法是'@': path.resolve(__dirname, 'src') -
proxy 格式不同：Vite 不支持
devServer.proxy嵌套写法，直接写server.proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } - 若原项目用
less并有全局变量（如主题色），需在css.preprocessorOptions.less.modifyVars中显式声明
调整入口文件与静态资源引用
Vite 不走模板注入逻辑，HTML 和资源引用方式有硬性变化：
立即学习“Java免费学习笔记（深入）”；
-
index.html 移至项目根目录（非
public/），且必须包含<script type="module" src="/src/main.js"></script> -
图片等静态资源：Webpack 的
require('./logo.png')要改为import logo from './logo.png'或new URL('./logo.png', import.meta.url).href -
动态导入路径：
import(`@/pages/${name}/index.vue`)不被支持，需改用import.meta.glob('./pages/**/index.vue')配合对象查找
处理环境变量与模块兼容问题
两个高频报错源头，提前修复可省去 80% 控制台红字：
-
环境变量前缀强制为
VITE_：原.env中的VUE_APP_API_URL改为VITE_API_URL，代码中访问方式从process.env.VUE_APP_API_URL改为import.meta.env.VITE_API_URL -
CommonJS 报错（
require is not defined）：优先尝试optimizeDeps.include白名单；仍失败再引入@rollup/plugin-commonjs插件 -
TypeScript 项目：需在
tsconfig.json中启用"isolatedModules": true，并添加shims-vue.d.ts声明文件
