vue设置全局访问接口API地址操作

在Vue框架中，为了方便管理和维护前后端交互的接口API，我们需要进行全局访问接口的设置。这主要是因为当后端接口地址或网络环境发生变化时，如果接口URL分散在代码各处，修改起来会非常繁琐。以下是一种常见的实现方法： 在项目的`src`目录下创建一个名为`interface`的文件夹，然后在这个文件夹内新建一个`index.js`文件。在`index.js`中，定义全局访问接口地址，例如： ```javascript // src/interface/index.js let commonUrl = "http://ip:port"; let baseUrl = { commonUrl }; export default baseUrl; ``` 接着，在`main.js`文件中引入这个配置，并将其挂载到Vue的原型对象上，这样就可以在任何组件中通过`this.$api`访问到全局的接口地址： ```javascript // main.js import api from "./interface/index"; Vue.prototype.$api = api.commonUrl; ``` 现在，你可以在组件中使用`this.$api`来调用接口，如： ```javascript // 某组件 axios.get(this.$api + "/xx/xx").then(function (resp) { // ... }); ``` 这样，如果后端接口地址发生变化，只需要在`interface/index.js`中修改一次，所有使用到接口的地方都会自动更新。 此外，还可以进一步封装API，以提高代码复用性和可维护性。例如，可以创建一个全局的`global.vue`文件，定义本地和线上环境的接口地址： ```html <!-- src/components/api/global.vue --> <template> <div></div> </template> <script> const localSrc = 'http://192.168.0.103:8444'; const serverSrc = 'http://www.xxxxxx.com:8080/jobs-api'; export default { localSrc, serverSrc }; </script> <style></style> ``` 然后在`main.js`中全局注册并引入这个文件： ```javascript // main.js import global_ from './components/api/global'; Vue.prototype.GLOBAL = global_; ``` 在组件中，你可以通过`this.GLOBAL`来访问这些接口地址，比如： ```javascript // 某组件 axios.post(this.GLOBAL.serverSrc + '/login', { // 请求参数... }, { headers: { // 请求头... } }).then(function (response) { // ... }); ``` 通过这种方式，我们可以更方便地管理全局API接口，减少重复代码，提高代码的可维护性。当项目中的接口地址需要调整时，只需要在一个地方修改，就能确保整个项目中的接口调用都随之更新，避免了因遗漏而导致的错误。