English
资源说明：问题描述：
使用vue-cli创建的项目，开发地址是localhost:8080，由于后台开发不同的模块，导致每个模块请求的ip和端口号不一致
例如：http://192.168.10.22:8081 或者 http://192.168.10.30:9999等
解决问题：
在vue.config.js中配置不同的端口号
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
devServer: {
open: true,
proxy: {
在Vue.js开发过程中，我们经常会遇到前后端分离的情况，此时前端和后端的开发环境可能在不同的IP和端口上。Vue CLI创建的项目默认运行在`localhost:8080`，但后端API接口可能分布在多个IP和端口上，这就会导致跨域问题。为了解决这个问题，我们可以利用Vue CLI的配置文件`vue.config.js`中的`devServer.proxy`选项来设置代理。
打开`vue.config.js`文件，如果没有这个文件，可以在项目的根目录下创建它。然后添加以下配置：
```javascript
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
devServer: {
open: true,
proxy: {
'/api1': {
target: 'http://192.168.10.22:8081',
changeOrigin: true, // 允许跨域
pathRewrite: {
'^/api1': '', // 将/api1前缀重写为空
},
ws: false, // 是否启用websockets
},
'/api2': {
target: 'http://192.168.10.30:9999',
changeOrigin: true,
pathRewrite: {
'^/api2': '', // 将/api2前缀重写为空
},
ws: false,
},
},
},
};
```
在这个例子中，我们设置了两个代理规则：'/api1' 和 '/api2'，分别对应不同的后端服务。当你在前端发起如`/api1/some-endpoint`或`/api2/another-endpoint`的请求时，Vue CLI的开发服务器会自动将这些请求转发到对应的后端服务器，从而解决跨域问题。
然而，如果项目中有多个模块，每个模块请求的IP和端口都不同，那么保持`vue.config.js`中的代理配置可配置化就显得很重要。这里有两个思路：
**思路一**：
尝试在`public`目录下创建一个JSON文件，存储所有的接口地址配置，然后在Vue组件中读取这个JSON文件。但这种方法可能会遇到静态资源路径解析的问题，导致JSON文件无法正确加载。
**思路二**：
在`public`目录下创建一个JS文件，将所有接口地址挂在`window`对象上，然后在HTML的`index.html`文件中引入这个JS文件。这样，后端开发者可以修改这个JS文件中的URL，而不会影响前端的打包。例如：
在`public/js/apiConfig.js`中：
```javascript
window.serverUrls = {
publicSentiment: 'http://192.168.10.22:8081',
monitor: 'http://192.168.70.6:9999',
};
```
在`public/index.html`中：
```html
```
然后在Vue组件中使用这些URL：
```javascript
export const getDictionary = (params) => {
return _axios({
url: `${window.serverUrls.monitor}/keypersonnel/getDictionaryForType`,
method: 'post',
data: params,
});
};
```
这种方式可以让前端代码与具体的接口地址解耦，后端只需要更新`apiConfig.js`文件，无需频繁地重新打包前端应用。
需要注意的是，以上代理配置仅在开发环境中生效。当项目部署到生产环境时，需要确保服务器配置了CORS（跨源资源共享）或者通过反向代理服务器将API请求转发到正确的后端服务。对于生产环境，通常不会存在跨域问题，因为前端和后端通常部署在同一域名下。如果仍有跨域问题，需要咨询后端团队，调整服务器配置。
总结来说，解决Vue项目中跨域问题的关键在于理解并正确使用`devServer.proxy`配置，以及在项目结构中设计灵活的接口地址管理策略。通过这些方法，你可以轻松应对多后端服务的开发需求，同时减少因接口变动带来的不必要的开发工作。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
