vue 通过配置静态配置文件配置axios请求的域名端口

Q先生兜兜有糖

2022-04-11 915 阅读1分钟

前段时间公司的一个vue项目前后端分离,要求前端动态配置ajax请求的地址，项目采用前后端分离开发，然后打包成静态资源后端将静态资源放在项目内统一部署，这就需要前端暴露一个静态配置文件给后端，后端能直接操作修改域名：前端项目static文件夹下的文件打包过后，会单独放在static文件夹下面

第一步：在static文件夹下创建一个config.json文件,并定义一个BASE_URL,打包过后后端可以通过修改这个参数来控制前端访问的域名和端口。

{
‘BASE_URL’:127.0.0.0:8080
}

第二步：在static文件夹下创建一个config.json文件,并定义一个BASE_URL,打包过后后端可以通过修改这个参数来控制前端访问的域名和端口。

const starApp = ()=>{
axios.get('static/config.json').then(res=>{
Vue.prototype.BASE_URL = res.BASE_URL
new Vue({
    el:'#app',
    router,
    store,
    components:{app},
    template:'<app/>'
    })
})
}
startApp（）

第三步：api接口最好是统一存放，方便添加统一的BASE_URL,不然后面不好管理。创建一个api的文件夹统一存放所有的Ajax请求的地址:url.js文件

import Vue from 'vue

export const API1 = Vue.prototype+'api/vi/aaa'
export const API2 = Vue.prototype+'api/vi/bbb'
export const API3 = Vue.prototype+'api/vi/ccc'
export const API4...
export const API5...

第四步：api接口准备好了然后在需要调用的地方引用即可,这样调用的时候就是读取的静态文件的地址，达到了动态配置的目的。当域名更换的时候，后端服务可以通过写代码读他们的配置文件然后写入到config.json文件中。前端不需要做任何修改。

import { API1,API2,API3,...} from '@api/url.js

this.$http.post(API1, {}).then(res=>{
})
...