尝试将博客管理端升级为 vite，升级的过程基本没遇到坑，几乎无缝完成升级。

创建 vite 项目

通过 npm create vite@latest 创建 React TypeScript + SWC 项目，然后将核心文件复制到项目中：

• src/vite-env.d.ts
• index.html
• tsconfig.json
• tsconfig.node.json
• vite.config.ts

把 index.html 中引入的文件直接改成项目中的入口文件。

启动与打包指令

• 启动：react-scripts start 改为 vite
• 打包：react-scripts build 改为 vite build

端口和基础路径

移除原有的 .env 配置：

PORT = 3030
PUBLIC_URL = /admin

vite.config.ts 中增加配置：

base: '/admin/',
server: {
  port: 3030,
},

使用： process.env.PUBLIC_URL 改为 import.meta.env.BASE_URL

环境变量

• 定义：REACT_APP_XXX 改为 VITE_API_XXX
• 前端代码中调用：process.env.REACT_APP_XXX 改为 import.meta.env.VITE_API_XXX
• 在 vite.config.ts 中调用： process.env.VITE_API_XXX

本地代理

移除 setupProxy.js，改为使用 vite 的代理：

server: {
  port: 3030,
  proxy: {
    '/xxx': {
      target: process.env.VITE_XXX,
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/xxx/, ''),
    },
  },
}, 

完成升级

经过以上的这些操作，整个项目就可以完好的跑起来了，路由、antd及其他第三方依赖运行起来都很正常。然后就是移除掉 react-scripts 相关的依赖和配置文件，即完成全部升级过程。

升级为 vite 后，启动和热更新速度都得到较大提升，基本是 1 秒内即可完成项目启动，尤大实在是太强了。