如何根据开发与生产环境更改提取调用的 URL 前缀？

Question

这是的后续。

我用的是Vite，开发服务器自带代理服务器，可以这样指定代理：

proxy: {
  '/v1': {
    target: 'https://127.0.0.1:8080',
    changeOrigin: true
  }
}

然后 fetch 调用如下：

fetch("/v1/get-users");

将有效地转化为：

fetch("https://127.0.0.1:8080/v1/get-users");

这非常有效，因为那是我的 API 服务器托管在我的开发环境中的地方。

但是，这将在产品上失败，因为我的 API 服务器托管在 https://api.mysite.com

理想情况下，我可以以某种方式表达我的 prod 前缀应该是 https://api.mysite.com 而不是 https://127.0.0.1:8080，但显然 Vite 的构建输出不使用代理服务器。

人们通常如何处理这个问题？我唯一能想到的可能是这样的，但似乎有点恶心：

function getPrefix() {
  return location.hostname === "mysite.com" ? "https://api.mysite.com" : "";
}

fetch(getPrefix() + "/v1/get-users");

但这似乎有点混乱，而且必须将其添加到每个提取调用中。

我也可以制作一个获取包装器，但我只是想知道这种事情是人们是如何解决这个问题的，或者是否有更多此常见问题的“最佳实践”解决方案。

Answer 1

我能想到的最简单（也是最干净）的解决方案是替换代码中的值。这通常用于诸如 process.env.NODE_ENV 之类的事情，但这当然是一个标准用例。

您可以使用 ~~rollup-replace-plugin~~ vite-plugin-replace，它允许您替换代码中的值。

将vite.config.js更改为：

// ...
import { replaceCodePlugin } from "vite-plugin-replace";

export default {
  // ...
  plugins: [
    replaceCodePlugin({
      replacements: [
        {
          from: "__SITE_BASE__",
          to: process.env.NODE_ENV === "production"
                ? "https://api.mysite.com" // production site
                : "" // development proxy,
        }
      ],
    }),
  ],
});

在你的代码中，你会做：

fetch("__SITE_BASE__/v1/get-users");

这将比您当前的方法更有优势，因为首先，您可以轻松更改您的网站基础（而不是挖掘您的代码来查找该功能），其次，它更容易编写，最后您拥有静态数据, 因此您不必在每次用户加载页面时都调用该函数，无论如何这对性能来说更好。

如何根据开发与生产环境更改提取调用的 URL 前缀？

How to change the URL prefix for fetch calls depending on dev vs prod environment?

javascript

fetch-api

http-proxy

vite