前端私有化部署配置共有信息解决方案

针对toB私有化部署的项目，一些私有化的配置，比如标签页标题、标签页logo、页面公司logo等全局共用的私有化配置，可能随着客户的不同，这些配置内容也会发生变化，下面总结了几种常用的方式，每种方式各有优缺点，可以根据具体的业务需求参考：

方案一：环境变量

在这个方案中，我们可以通过将配置信息作为环境变量，然后在构建过程中获取这些变量。具体来说，在Webpack的DefinePlugin插件中，我们可以定义一些全局的常量。

这是一个具体的实现示例：

 1 // webpack.config.js
 2 const webpack = require('webpack');
 3 
 4 module.exports = {
 5   //...
 6   plugins: [
 7     new webpack.DefinePlugin({
 8       'process.env': {
 9         'TITLE': JSON.stringify(process.env.TITLE),
10         'LOGO_PATH': JSON.stringify(process.env.LOGO_PATH)
11       }
12     }),
13   ],
14   //...
15 };

然后在React应用中，你可以这样使用：

// 在React应用中
document.title = process.env.TITLE;
// 对于logo的使用，你可以在需要的地方这样使用
const link = document.querySelector('link[rel*=\'icon\']') || document.createElement('link');
link.setAttribute('type', 'image/x-icon');
link.setAttribute('rel', 'shortcut icon');
link.setAttribute(
    'href',
    process.env.LOGO_PATH
);
document.getElementsByTagName('head')[0].appendChild(link);

这种方法的优点是：

简单易用，不需要额外的请求或加载
配置可以在构建过程中进行，无需运行时获取

缺点是：

需要在构建时提供配置，无法在运行时动态改变，打包完成后便固定下来

方案二：动态配置文件

在这个方案中，我们可以在服务器上放置一个配置文件，然后在客户端启动时加载这个文件。在这个文件中，我们可以包含任何我们需要的配置信息。

这是一个具体的实现示例：

首先，创建一个配置文件config.json，内容如下：

1 {
2   "title": "客户标题",
3   "logoPath": "/path/to/logo.png"
4 }

 1 // App.js
 2 import React, { useEffect, useState } from 'react';
 3 import axios from 'axios';
 4 
 5 function App() {
 6   const [config, setConfig] = useState(null);
 7 
 8   useEffect(() => {
 9     axios.get('/path/to/config.json')
10       .then(response => {
11         document.title = response.data.title;
12         setConfig(response.data);
13       });
14   }, []);
15 
16   if (!config) {
17     return <div>Loading...</div>;
18   }
19 
20   return (
21     <div>
22       <img src={config.logoPath} alt="logo" />
23       {/*...其他代码...*/}
24     </div>
25   );
26 }
27 
28 export default App;

这种方法的优点是：

配置可以在运行时动态获取和更改
可以用于更复杂的配置需求

缺点是：

需要额外的请求来获取配置
配置的加载可能会影响应用的启动时间

方案三：配置服务器API

与动态配置文件的方式类似，我们也可以通过服务器API来获取配置。你的服务器可以根据请求的信息（例如，来自特定客户的API Token或其他识别信息）返回不同的配置信息。

下面是一个具体的例子：

 1 // App.js
 2 import React, { useEffect, useState } from 'react';
 3 import axios from 'axios';
 4 
 5 function App() {
 6   const [config, setConfig] = useState(null);
 7 
 8   useEffect(() => {
 9     axios.get('/api/getConfig', {
10       params: {
11         customerID: '123', // 这里用你的实际客户ID
12       }
13     }).then(response => {
14       document.title = response.data.title;
15       setConfig(response.data);
16     });
17   }, []);
18 
19   if (!config) {
20     return <div>Loading...</div>;
21   }
22 
23   return (
24     <div>
25       <img src={config.logoPath} alt="logo" />
26       {/*...其他代码...*/}
27     </div>
28   );
29 }
30 
31 export default App;

优点：

可以基于服务器端的逻辑提供更灵活的配置。
配置可以在运行时动态获取和更改。

缺点：

需要后端支持和配合。
需要额外的请求来获取配置，可能会影响应用的启动时间。

方案四：将配置信息编码到URL中

你可以将某些配置信息编码到URL的查询参数中。例如，你可以使用查询参数来表示不同的客户。然后，你可以在应用启动时，根据这些查询参数来决定使用哪些配置。