前言

最近在做一个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;

成功！~

【Vite】Vite设置好了Proxy，但接口却404！解决方案来了！

前言

错误原因