diff --git a/.gitignore b/.gitignore
index b67735a6..ec1b34aa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ yarn-error.log
 package-lock.json
 .vscode
 .idea
+config/local_config.yaml
 test/e2e/videos
 test/e2e/screenshots
 test/e2e/downloads
diff --git a/README-zh_CN.rst b/README-zh_CN.rst
index 86caee5f..97f1becf 100644
--- a/README-zh_CN.rst
+++ b/README-zh_CN.rst
@@ -82,8 +82,8 @@
 
 -  ``yarn run mock``: 使用\ `rap2 <http://rap2.taobao.org/>`__\ 工具
    mock 接口
--  ``yarn run dev``: 使用实际接口，需要将\ ``webpack.dev.js``\ 文件第 47
-   行的 “http://pre.xxx.com” 修改为实际地址
+-  ``yarn run dev``: 使用实际接口，可复制 \ ``config/config.yaml``\ 到
+   \ ``config/local_config.yaml``\ ，将 \ ``server``\ 替换为正确的地址
 -  ``yarn run build``: 构建打包，可将生成的 dist 目录的内容交给后端
 
 文档
diff --git a/README.rst b/README.rst
index 5ee7c294..e4699bd1 100644
--- a/README.rst
+++ b/README.rst
@@ -82,9 +82,9 @@ Under the root directory, with ``package.json`` in the same place.
 
 -  ``yarn run mock``: Use the mock interface of
    `rap2 <http://rap2.taobao.org/>`__
--  ``yarn run dev``: To use the actual interface, please change the
-   "http://pre.xxx.com" in line 47 into the real address in file
-   ``webpack.dev.js``.
+-  ``yarn run dev``: To use the actual interface, you can copy
+   ``config/config.yaml`` to ``config/local_config.yaml`` , and
+   replace the ``server`` value with the correct address.
 -  ``yarn run build``: Build packages and then you can hand over the
    contents of the generated *dist* directory to the back end.
 
diff --git a/config/config.yaml b/config/config.yaml
new file mode 100644
index 00000000..2a6cae9e
--- /dev/null
+++ b/config/config.yaml
@@ -0,0 +1,3 @@
+host: 0.0.0.0
+port: 8088
+server: http://localhost
diff --git a/config/server.dev.js b/config/server.dev.js
new file mode 100644
index 00000000..5633bebb
--- /dev/null
+++ b/config/server.dev.js
@@ -0,0 +1,31 @@
+const { isObject } = require('lodash');
+const { getServerConfig } = require('./utils');
+
+const { server, port, host } = getServerConfig();
+
+const getProxyByMap = (apiMap) => {
+  const result = {};
+  Object.keys(apiMap).forEach((key) => {
+    const value = apiMap[key];
+    const base = isObject(value) ? value : { target: value };
+    result[key] = {
+      ...base,
+      changeOrigin: true,
+      secure: false,
+      headers: {
+        Connection: 'keep-alive',
+      },
+    };
+  });
+  return result;
+};
+
+const apiMap = {
+  '/api/': server,
+};
+
+// eslint-disable-next-line no-console
+console.log('apiMap', apiMap);
+const proxy = getProxyByMap(apiMap);
+
+module.exports = { proxy, host, port };
diff --git a/config/utils.js b/config/utils.js
new file mode 100644
index 00000000..fe6b0960
--- /dev/null
+++ b/config/utils.js
@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+
+const yaml = require('js-yaml');
+const { merge } = require('lodash');
+
+const root = (dir) =>
+  `${path.resolve(__dirname, './')}/${dir}`.replace(/(\/+)/g, '/');
+
+const loadYaml = (filePath) => {
+  try {
+    return yaml.load(fs.readFileSync(filePath), 'utf8');
+  } catch (e) {
+    return false;
+  }
+};
+
+const getServerConfig = (key) => {
+  // parse config yaml
+  const config = loadYaml(root('./config.yaml')) || {};
+
+  const tryFile = root('./local_config.yaml');
+  if (fs.existsSync(tryFile)) {
+    // merge local_config
+    const local_config = loadYaml(tryFile);
+    if (typeof local_config === 'object') {
+      merge(config, local_config);
+    }
+  }
+
+  return key ? config[key] : config;
+};
+
+module.exports = {
+  getServerConfig,
+  root,
+};
diff --git a/config/webpack.dev.js b/config/webpack.dev.js
index d31ca812..abb58200 100644
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@@ -23,17 +23,20 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
 const common = require('./webpack.common');
 const theme = require('./theme');
 
+const server = require('./server.dev');
+
 const root = (path) => resolve(__dirname, `../${path}`);
 
+const { host, port, proxy } = server;
+
 module.exports = (env) => {
   const API = (env || {}).API || 'mock';
 
   console.log('API %s', API);
 
   const devServer = {
-    host: '0.0.0.0',
-    // host: 'localhost',
-    port: 8088,
+    host,
+    port,
     contentBase: root('dist'),
     historyApiFallback: true,
     compress: true,
@@ -53,16 +56,7 @@ module.exports = (env) => {
   };
 
   if (API === 'mock' || API === 'dev') {
-    devServer.proxy = {
-      '/api': {
-        target: 'http://localhost',
-        changeOrigin: true,
-        secure: false,
-        headers: {
-          Connection: 'keep-alive',
-        },
-      },
-    };
+    devServer.proxy = proxy;
   }
 
   const { version, ...restConfig } = common;
diff --git a/doc/source/configuration/skyline-console-settings.rst b/doc/source/configuration/skyline-console-settings.rst
index 5bc2bfc9..05cec623 100644
--- a/doc/source/configuration/skyline-console-settings.rst
+++ b/doc/source/configuration/skyline-console-settings.rst
@@ -8,40 +8,26 @@ Skyline Console Settings Reference
 
    -  Prepare an accessible backend, for example: ``https://172.20.154.250``
 
-   -  Modify the corresponding configuration in ``config/webpack.dev.js``:
+   -  Add file ``config/local_config.yaml``:
 
-   .. code:: javascript
+   .. code-block:: yaml
 
-    if (API === 'mock' || API === 'dev') {
-      devServer.proxy = {
-        '/api': {
-          target: 'https://172.20.154.250',
-          changeOrigin: true,
-          secure: false,
-        },
-      };
-    }
+    server: https://172.20.154.250
 
 -  Configure access host and port
 
-   -  Modify ``devServer.host`` and ``devServer.port``
+   -  The default configuration is in ``config/config.yaml``
+      -  ``host`` is ``0.0.0.0``
+      -  ``port`` is ``8088``
+      -  If the current configuration does not need to be changed,
+      the following steps do not need to be operated.
+   -  Added file ``config/local_config.yaml``
+   -  Add ``host`` and ``port`` configurations
 
-   -  Modify the corresponding configuration in ``config/webpack.dev.js``
+   .. code-block:: yaml
 
-   .. code:: javascript
-
-    const devServer = {
-      host: '0.0.0.0',
-      // host: 'localhost',
-      port: 8088,
-      contentBase: root('dist'),
-      historyApiFallback: true,
-      compress: true,
-      hot: true,
-      inline: true,
-      disableHostCheck: true,
-      // progress: true
-    };
+    host: localhost
+    port: 8080
 
 -  Execute in the project root directory, which is the same level as ``package.json``
 
@@ -49,6 +35,6 @@ Skyline Console Settings Reference
 
     yarn run dev
 
--  Use the ``host`` and ``port`` configured in ``config/webpack.dev.js`` to access, such as ``http://localhost:8088``
+   - Use the ``host`` and ``port`` configured in ``config/config.yaml`` or ``config/local_config.yaml`` to access, such as ``http://localhost:8088``.
 
 -  The front-end real-time update environment used for development is done.
diff --git a/doc/source/contributor/development.environment.rst b/doc/source/contributor/development.environment.rst
index 252f9e86..977568b1 100644
--- a/doc/source/contributor/development.environment.rst
+++ b/doc/source/contributor/development.environment.rst
@@ -83,9 +83,9 @@ You can also use the following commands:
 
 -  ``yarn run mock``: Use the mock interface of
    `rap2 <http://rap2.taobao.org/>`__
--  ``yarn run dev``: To use the actual interface, please change the
-   "http://pre.xxx.com" in line 47 into the real address in file
-   ``webpack.dev.js``.
+-  ``yarn run dev``: To use the actual interface, you can copy
+   ``config/config.yaml`` to ``config/local_config.yaml`` , and
+   replace the ``server`` value with the correct address.
 -  ``yarn run build``: Build packages and then you can hand over the
    contents of the generated *dist* directory to the back end.
 
diff --git a/doc/source/development/catalog-introduction.rst b/doc/source/development/catalog-introduction.rst
index 0f539823..b0be885f 100644
--- a/doc/source/development/catalog-introduction.rst
+++ b/doc/source/development/catalog-introduction.rst
@@ -68,6 +68,10 @@ Catalog Introduction-Image Version
     ├── Makefile
     ├── README.rst
     ├── config
+    │   ├── config.yaml (The default configuration of host, port, and server during development)
+    │   ├── local_config.yaml (gitignore file, you can configure the host/port/server used in the actual development, if the actual value is different from the default value in config.yaml, you can modify it in this file)
+    │   ├── server.dev.js (Read the custom configuration information used during development)
+    │   ├── utils.js
     │   ├── theme.js
     │   ├── webpack.common.js
     │   ├── webpack.dev.js  (Webpack configuration used during development)
diff --git a/doc/source/development/ready-to-work.rst b/doc/source/development/ready-to-work.rst
index 0b8078c5..023b9370 100644
--- a/doc/source/development/ready-to-work.rst
+++ b/doc/source/development/ready-to-work.rst
@@ -36,40 +36,26 @@ Preparation before development
 
    -  Prepare an accessible backend, for example: ``https://172.20.154.250``
 
-   -  Modify the corresponding configuration in ``config/webpack.dev.js``:
+   -  Add file ``config/local_config.yaml``:
 
-   .. code-block:: javascript
+   .. code-block:: yaml
 
-    if (API === 'mock' || API === 'dev') {
-      devServer.proxy = {
-        '/api': {
-          target: 'https://172.20.154.250',
-          changeOrigin: true,
-          secure: false,
-        },
-      };
-    }
+    server: https://172.20.154.250
 
 -  Configure access host and port
 
-   -  Modify :guilabel:`devServer.host` and :guilabel:`devServer.port`
+   -  The default configuration is in ``config/config.yaml``
+      -  ``host`` is ``0.0.0.0``
+      -  ``port`` is ``8088``
+      -  If the current configuration does not need to be changed,
+      the following steps do not need to be operated.
+   -  Added file ``config/local_config.yaml``
+   -  Add ``host`` and ``port`` configurations
 
-   -  Modify the corresponding configuration in ``config/webpack.dev.js``
+   .. code-block:: yaml
 
-   .. code-block:: javascript
-
-    const devServer = {
-      host: '0.0.0.0',
-      // host: 'localhost',
-      port: 8088,
-      contentBase: root('dist'),
-      historyApiFallback: true,
-      compress: true,
-      hot: true,
-      inline: true,
-      disableHostCheck: true,
-      // progress: true
-    };
+    host: localhost
+    port: 8080
 
 -  Completed
 
@@ -81,7 +67,8 @@ Preparation before development
     yarn run dev
 
    - Use the :guilabel:`host` and :guilabel:`port` configured in
-     ``config/webpack.dev.js`` to access, such as ``http://localhost:8088``
+     ``config/config.yaml`` or ``config/local_config.yaml`` to access,
+     such as ``http://localhost:8088``
 
    - The front-end real-time update environment used for development is done.
 
diff --git a/docs/en/develop/1-ready-to-work.md b/docs/en/develop/1-ready-to-work.md
index fab06f7c..36e4b6bb 100644
--- a/docs/en/develop/1-ready-to-work.md
+++ b/docs/en/develop/1-ready-to-work.md
@@ -26,37 +26,24 @@ English | [Chinese](../../zh/develop/1-ready-to-work.md)
 
 - Prepare a usable backend
   - Prepare an accessible backend, for example: https://172.20.154.250
-  - Modify the corresponding configuration in `config/webpack.dev.js`:
+  - Add file ``config/local_config.yaml``:
 
-    ```javascript
-    if (API === 'mock' || API === 'dev') {
-      devServer.proxy = {
-        '/api': {
-          target: 'https://172.20.154.250',
-          changeOrigin: true,
-          secure: false,
-        },
-      };
-    }
+    ```yaml
+    server: https://172.20.154.250
     ```
 
 - Configure access host and port
-  - Modify `devServer.host` and `devServer.port`
-  - Modify the corresponding configuration in `config/webpack.dev.js`
+  - The default configuration is in ``config/config.yaml``
+    - `host` is `0.0.0.0`
+    - `port` is `8088`
+    - If the current configuration does not need to be changed,
+       the following steps do not need to be operated.
+  - Added file `config/local_config.yaml`
+  - Add `host` and `port` configurations
 
-    ```javascript
-    const devServer = {
-      host: '0.0.0.0',
-      // host: 'localhost',
-      port: 8088,
-      contentBase: root('dist'),
-      historyApiFallback: true,
-      compress: true,
-      hot: true,
-      inline: true,
-      disableHostCheck: true,
-      // progress: true
-    };
+    ```yaml
+    host: localhost
+    port: 8080
     ```
 
 - Completed
@@ -66,7 +53,8 @@ English | [Chinese](../../zh/develop/1-ready-to-work.md)
     yarn run dev
     ```
 
-  - Use the `host` and `port` configured in `config/webpack.dev.js` to access, such as `http://localhost:8088`
+  - Use the `host` and `port` configured in `config/config.yaml` or
+  `config/local_config.yaml` to access, such as `http://localhost:8088`
   - The front-end real-time update environment used for development is done.
 
 # Front-end package used in production environment
diff --git a/docs/en/develop/2-catalog-introduction.md b/docs/en/develop/2-catalog-introduction.md
index 4757bda7..2cf4b4be 100644
--- a/docs/en/develop/2-catalog-introduction.md
+++ b/docs/en/develop/2-catalog-introduction.md
@@ -101,6 +101,10 @@ English | [Chinese](../../zh/develop/2-catalog-introduction.md)
 ├── Makefile
 ├── README.rst
 ├── config
+│   ├── config.yaml (The default configuration of host, port, and server during development)
+│   ├── local_config.yaml (gitignore file, you can configure the host/port/server used in the actual development, if the actual value is different from the default value in config.yaml, you can modify it in this file)
+│   ├── server.dev.js (Read the custom configuration information used during development)
+│   ├── utils.js
 │   ├── theme.js
 │   ├── webpack.common.js
 │   ├── webpack.dev.js  (Webpack configuration used during development)
diff --git a/docs/zh/develop/1-ready-to-work.md b/docs/zh/develop/1-ready-to-work.md
index e744ff5f..7d12139d 100644
--- a/docs/zh/develop/1-ready-to-work.md
+++ b/docs/zh/develop/1-ready-to-work.md
@@ -26,37 +26,23 @@
 
 - 准备好可用的后端
   - 准备好可访问的后端，举个例子：https://172.20.154.250
-  - 修改`config/webpack.dev.js`中的相应配置：
+  - 新增 `config/local_config.yaml` 中的 `server` 配置：
 
-    ```javascript
-    if (API === 'mock' || API === 'dev') {
-      devServer.proxy = {
-        '/api': {
-          target: 'https://172.20.154.250',
-          changeOrigin: true,
-          secure: false,
-        },
-      };
-    }
+    ```yaml
+    server: https://172.20.154.250
     ```
 
 - 配置访问的 host 与 port
-  - 修改`devServer.host`与`devServer.port`
-  - 修改`config/webpack.dev.js`中的相应配置
+  - 默认配置在 `config/config.yaml`
+    - `host` 为 `0.0.0.0`
+    - `port` 为 `8088`
+    - 如果当前配置无需变更，则下面的步骤无需操作
+  - 新增 `config/local_config.yaml`
+  - 添加 `host` 与 `port` 配置
 
-    ```javascript
-    const devServer = {
-      host: '0.0.0.0',
-      // host: 'localhost',
-      port: 8088,
-      contentBase: root('dist'),
-      historyApiFallback: true,
-      compress: true,
-      hot: true,
-      inline: true,
-      disableHostCheck: true,
-      // progress: true
-    };
+    ```yaml
+    host: localhost
+    port: 8080
     ```
 
 - 搭建完成
@@ -66,7 +52,8 @@
     yarn run dev
     ```
 
-  - 使用`config/webpack.dev.js`中配置的`host`与`port`访问即可，如`http://localhost:8088`
+  - 使用 `config/local_config.yaml` 或 `config/config.yaml` 中配置
+  的 `host` 与 `port` 访问即可，如`http://localhost:8088`
   - 开发使用的前端实时更新环境搞定。
 
 # 生产环境使用的前端包
diff --git a/docs/zh/develop/2-catalog-introduction.md b/docs/zh/develop/2-catalog-introduction.md
index cdfb2d30..33bb2d4b 100644
--- a/docs/zh/develop/2-catalog-introduction.md
+++ b/docs/zh/develop/2-catalog-introduction.md
@@ -101,6 +101,10 @@
 ├── Makefile
 ├── README.rst
 ├── config
+│   ├── config.yaml （开发时 host, port, server 的默认配置）
+│   ├── local_config.yaml （gitignore的文件，可配置实际开发时使用的 host/port/server，如实际使用的值与config.yaml中的默认值不一致，在该文件中修改即可）
+│   ├── server.dev.js （读取开发时使用的自定义配置信息）
+│   ├── utils.js
 │   ├── theme.js
 │   ├── webpack.common.js
 │   ├── webpack.dev.js  (开发时使用的webpack配置)
diff --git a/releasenotes/notes/Optimize-Configuration-Reading-5914bb51c3ecb0c4.yaml b/releasenotes/notes/Optimize-Configuration-Reading-5914bb51c3ecb0c4.yaml
new file mode 100644
index 00000000..78e16624
--- /dev/null
+++ b/releasenotes/notes/Optimize-Configuration-Reading-5914bb51c3ecb0c4.yaml
@@ -0,0 +1,7 @@
+---
+features:
+  - |
+    Add config/config.yaml to set the default configurations of host,
+    port and server. For the development, you can add config/local_config.yaml,
+    to set custom host, port, server, the config/local_config.yaml file is
+    gitignored.