deploy

fantastic-mobile · Aug 28, 2024 · 440e1cc · 440e1cc
1 parent 39a9d12
commit 440e1cc
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/guide/q-a.md b/guide/q-a.md
@@ -90,6 +90,41 @@ Vite 4.3 显著提升了开发服务器的性能，具体可以阅读这篇文
 
 其中 8192 表示内存空间大小。
 
+## 直接修改构建产物的接口地址
+
+如果你需要将构建产物部署到多台服务器，并且根据不同服务器配置不同的接口地址。这时候如果采用新增环境配置文件的方式，会存在一个弊端，就是不同环境需要分别进行构建。下面的方法可以让你直接修改构建产物的接口地址。
+
+新增 `/public/config.js` 文件：
+
+```js
+window.globalConfig = {
+  API_BASEURL: '/',
+}
+```
+
+在 `/index.html` 中引入：
+
+```html
+<body>
+  ...
+  <script src="/config.js"></script> // [!code ++]
+  <script type="module" src="/src/main.ts"></script>
+</body>
+```
+
+修改 `/src/api/index.ts` ，仅在生产环境时使用：
+
+```ts
+const api = axios.create({
+  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL, // [!code --]
+  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : (import.meta.env.DEV ? import.meta.env.VITE_APP_API_BASEURL : (window as any).globalConfig.API_BASEURL), // [!code ++]
+  timeout: 1000 * 60,
+  responseType: 'json',
+})
+```
+
+之后你就可以在构建产物目录下直接修改 `config.js` 文件内的接口地址了，此方法不仅适用于接口地址，可以自行扩展。
+
 ## 不会 TypeScript 怎么办
 
 不管个人还是团队、产品或者项目，从长远考虑我们都建议你学习 TypeScript，因为它是未来的趋势，而且大部分框架、库、插件都是用 TypeScript 开发的，足以证明它是构建一款成熟稳健产品的基石。