前言
最近在做一个Vue3+Vite+TypeScript的项目，进行一番网上冲浪后，参考了众多🐴友的方案，配置完vite.config.ts准备开始与后端的同学开始联调，发现无论怎么样都是404，然后就开始了一步步的排查！
错误原因
vite.config.ts
const viteEnv = loadEnv(configEnv.mode, `.env.${configEnv.mode}`) as ImportMetaEnv 复制代码
上面这个是之前老版本的vite的写法
proxy：
server: { host: '0.0.0.0', port: 3200, open: true, proxy: createViteProxy(viteEnv) } function createViteProxy(viteEnv: ImportMetaEnv) { const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'true'; if (!isOpenProxy) return undefined; const { http } = getEnvConfig(viteEnv); const proxy: Record<string, string | ProxyOptions> = { [http.proxy]: { target: http.url, changeOrigin: true, rewrite: path => path.replace(new RegExp(`^${http.proxy}`), '') } }; return proxy; } 复制代码
其实整个看下来很难找到问题，我反复看了多次，感觉写的没啥毛病，排查完之后发现问题的本身居然在viteEnv上，我打印了一下viteEnv发现根本就没有VITE_HTTP_PROXY这个属性，然后就觉得是loadEnv有问题，上官网看了看，果然，这里说一下loadEnv：
- 检查process.cwd()路径下.env.development.local、.env.development、.env.local、.env这四个环境文件。
- 输出NODE_ENV和VITE_开头的键值对。
- VITE_开头的键值对后面的不会覆盖前面的。
- NODE_ENV的值后面的会覆盖前面的。
新版本改成了这样写：
const viteEnv = loadEnv(configEnv.mode, process.cwd()) as ImportMetaEnv; 复制代码
成功！~
