Browse Source

docs(settings): 完善'生产环境动态配置'步骤 (#6297)

wyc001122 3 weeks ago
parent
commit
78c3c9da6f
2 changed files with 44 additions and 2 deletions
  1. 22 1
      docs/src/en/guide/essentials/settings.md
  2. 22 1
      docs/src/guide/essentials/settings.md

+ 22 - 1
docs/src/en/guide/essentials/settings.md

@@ -21,7 +21,7 @@ The rules are consistent with [Vite Env Variables and Modes](https://vitejs.dev/
   console.log(import.meta.env.VITE_PROT);
   ```
 
-- Variables starting with `VITE_GLOB_*` will be added to the `_app.config.js` configuration file during packaging. :::
+- Variables starting with `VITE_GLOB_*` will be added to the `_app.config.js` configuration file during packaging.
 
 :::
 
@@ -138,6 +138,27 @@ To add a new dynamically modifiable configuration item, simply follow the steps
   }
   ```
 
+- In `packages/effects/hooks/src/use-app-config.ts`, add the corresponding configuration item, such as:
+
+  ```ts
+  export function useAppConfig(
+    env: Record<string, any>,
+    isProduction: boolean,
+  ): ApplicationConfig {
+    // In production environment, directly use the window._VBEN_ADMIN_PRO_APP_CONF_ global variable
+    const config = isProduction
+      ? window._VBEN_ADMIN_PRO_APP_CONF_
+      : (env as VbenAdminProAppConfigRaw);
+
+    const { VITE_GLOB_API_URL, VITE_GLOB_OTHER_API_URL } = config; // [!code ++]
+
+    return {
+      apiURL: VITE_GLOB_API_URL,
+      otherApiURL: VITE_GLOB_OTHER_API_URL, // [!code ++]
+    };
+  }
+  ```
+
 At this point, you can use the `useAppConfig` method within the project to access the newly added configuration item.
 
 ```ts

+ 22 - 1
docs/src/guide/essentials/settings.md

@@ -21,7 +21,7 @@
   console.log(import.meta.env.VITE_PROT);
   ```
 
-- 以 `VITE_GLOB_*` 开头的的变量,在打包的时候,会被加入 `_app.config.js`配置文件当中. :::
+- 以 `VITE_GLOB_*` 开头的的变量,在打包的时候,会被加入 `_app.config.js`配置文件当中.
 
 :::
 
@@ -137,6 +137,27 @@ const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
   }
   ```
 
+- 在 `packages/effects/hooks/src/use-app-config.ts` 中,新增对应的配置项,如:
+
+  ```ts
+  export function useAppConfig(
+    env: Record<string, any>,
+    isProduction: boolean,
+  ): ApplicationConfig {
+    // 生产环境下,直接使用 window._VBEN_ADMIN_PRO_APP_CONF_ 全局变量
+    const config = isProduction
+      ? window._VBEN_ADMIN_PRO_APP_CONF_
+      : (env as VbenAdminProAppConfigRaw);
+
+    const { VITE_GLOB_API_URL, VITE_GLOB_OTHER_API_URL } = config; // [!code ++]
+
+    return {
+      apiURL: VITE_GLOB_API_URL,
+      otherApiURL: VITE_GLOB_OTHER_API_URL, // [!code ++]
+    };
+  }
+  ```
+
 到这里,就可以在项目内使用 `useAppConfig`方法获取到新增的配置项了。
 
 ```ts