vue process.env.VUE_APP_BASE_API的相关配置及axios简朴封装
1、根目次底下新建.env.dev和env.prod,内容如下：VUE_APP_BASE_API = 'http://192.168.1.xx:xxx'
2、vue.config相关内容：
devServer: {
hot: true, //热加载
host: '0.0.0.0',
port: 8080, //端口
// https: false, //false关闭https，true为开启
// open: true, //自动打开浏览器
proxy: {
// 在此处为需要解决跨域的 API 配置代理
'/api': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '') // 去掉 /api 前缀
}
}
}
3、package.json内容修改如下
"scripts": {
"serve": "vue-cli-service serve --mode dev",
"build": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint"
},
5、axios封装
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
// console.log(process.env.VUE_APP_BASE_API)
// 请求拦截器
service.interceptors.request.use(
config => {
// 添加请求头等前置处理
config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
return config
},
error => {
// 请求错误处理
console.log('Request Error:', error)
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 响应后处理
if (response.status === 200 && response.data.code === 200) {
return Promise.resolve(response.data.data)
} else {
return Promise.reject(response.data)
}
},
error => {
console.log('Response Error:', error)
return Promise.reject(error)
}
)
export default service
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]