vue项目设置ip访问

### 配置 Vue 项目的 API 请求 IP 地址 #### 使用 Axios 封装请求并配置基础路径 为了在 Vue 项目中设置 API 请求的基础 URL，可以通过创建自定义的 `axios` 实例来实现。这允许通过集中管理的方式更改所有的 API 调用目标服务器。 ```javascript import axios from 'axios'; const api = axios.create({ // 基础路径由全局变量 project 的 ip 属性决定，该属性来自外部配置文件 baseURL: 'http://' + window.project.ip + ':8222/api', timeout: 2500 // 设置超时时间 }); ``` 此方法适用于开发阶段以及生产环境下的静态配置[^1]。 #### 动态加载配置以支持不同部署场景 对于需要根据不同部署环境灵活调整的情况，则可以在应用启动前注入特定于当前环境的配置信息。一种做法是在 public 文件夹内放置名为 `config.js` 的脚本，并利用立即执行函数表达式(IIFE)将其暴露给全局作用域： ```javascript (function () { const config = { baseURL: process.env.NODE_ENV === "production" ? 'https://prod.example.com/' : 'http://localhost:8222/' }; window.config = config; })(); ``` 随后，在 main.js 或其他入口文件里引入上述配置文件即可让整个应用程序访问到这些设定值[^2]。 #### 开发期间使用代理解决跨域问题 当本地机器能够成功 ping 到远程主机并且可以直接通过浏览器获取 JSON 数据的情况下，如果希望直接使用 localhost 加上端口号的形式调用服务端API而不必担心 CORS(跨源资源共享)，则可以考虑采用 Webpack Dev Server 提供的 proxy 特性来进行转发处理: 编辑 vue.config.js 添加如下内容: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://xxx.xxx.xxx.xxx:8088/', changeOrigin: true, pathRewrite: {'^/api' : ''} } } } }; ``` 这样做的好处是可以保持前后端分离的同时简化前端工程师的工作流程，无需频繁修改代码中的URL地址就能轻松切换不同的后端服务实例[^3]。