前言
定制开发最近在做一个Vue3
+Vite
+TypeScript
的项目,定制开发进行一番网上冲浪后,定制开发参考了众多🐴友的方案,配置完vite.config.ts
准备开始与后端的同学开始联调,发现无论怎么样都是404
,然后就开始了一步步的排查!
错误原因
.config.ts
const viteEnv = loadEnv(configEnv.mode, `.env.${configEnv.mode}`) as ImportMetaEnv
- 1
上面这个是之前老版本的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; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
其实整个看下来很难找到问题,我反复看了多次,感觉写的没啥毛病,排查完之后发现问题的本身居然在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;
- 1
成功!~