在开发Web应用时，我们经常需要对不同的环境（如开发环境、测试环境、生产环境）配置不同的API域名。本文将详细介绍如何使用`webpack`和`vue`构建项目时，生成一个公共配置文件（如`serverConfig.json`），以便在不重新打包的情况下动态修改域名。
### 需求原因
在实际项目开发中，由于存在开发、测试和生产等多个环境，每个环境可能对应不同的API服务器。原始的做法是将域名硬编码到项目中，这导致每次切换环境时都需要重新打包。为了提高效率，后台开发者建议创建一个独立的配置文件，使得开发者能够直接修改配置文件来切换不同环境的域名，无需频繁打包。
### 解决方案
#### 第一步：安装插件
我们需要安装`generate-asset-webpack-plugin`插件，该插件用于在webpack打包过程中生成资产文件。在项目的根目录下运行以下命令：
```bash
npm install --save-dev generate-asset-webpack-plugin
```
#### 第二步：新建配置文件
在项目根目录下创建一个名为`serverConfig.json`的文件，用于存储不同环境的域名配置。例如：
```json
{
"ProdUrl": "http://text.com"
}
```
#### 第三步：引入并使用插件
接下来，在`build/webpack.prod.conf.js`文件中引入`generate-asset-webpack-plugin`插件：
```javascript
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json'); // 引入根目录下的配置文件
```
然后，在`webpack`的`plugins`数组中添加一个新的插件实例，用来生成`serverConfig.json`文件：
```javascript
plugins: [
// 打包时生成一个配置文件
new GenerateAssetPlugin({
filename: 'serverConfig.json',
fn: (compilation, cb) => {
cb(null, JSON.stringify(serverConfig)); // 将serverConfig.json内容转换为字符串
},
}),
],
```
#### 第四步：使用配置文件中的内容
在项目中，我们需要根据环境来动态获取配置文件中的域名。这里以使用`axios`进行HTTP请求为例，展示如何在请求拦截器中使用配置文件：
```javascript
import store from '@/store'; // 导入Vuex store
import axios from 'axios';
// ...其他代码...
axios.interceptors.request.use(async (config) => {
const baseURL = process.env.BASE_API;
if (process.env.NODE_ENV === 'production') {
// 在生产环境中，从serverConfig.json获取ProdUrl
const res = await axios.get('serverConfig.json');
baseURL = res.data.ProdUrl;
}
config.baseURL = baseURL;
// ...其他配置...
return config;
}, error => {
// 处理错误...
});
```
这里，我们使用`axios.get('serverConfig.json')`获取配置文件，注意由于这是异步操作，因此需要根据实际情况进行调整。
### 总结
通过以上步骤，我们成功实现了在`webpack + vue`项目中动态修改配置文件（如`serverConfig.json`）来切换不同环境的API域名。这样，每当需要切换环境时，只需修改`serverConfig.json`文件即可，无需重新打包项目。这种方法大大提高了开发效率，减少了不必要的重复工作。同时，对于其他依赖于环境配置的应用，也可以参考这种做法来实现动态配置。
