vue process.env.VUE_APP_BASE_API的相关配置及axios简朴封装

1、根目次底下新建.env.dev和env.prod,内容如下：

1. VUE_APP_BASE_API = 'http://192.168.1.xx:xxx'

复制代码

2、vue.config相关内容：

1. devServer: {
2.         hot: true, //热加载
3.         host: '0.0.0.0',
4.         port: 8080, //端口
5.         // https: false, //false关闭https，true为开启
6.         // open: true, //自动打开浏览器
7.         proxy: {
8.             // 在此处为需要解决跨域的 API 配置代理
9.             '/api': {
10.                 target: process.env.VUE_APP_BASE_API,
11.                 changeOrigin: true,
12.                 rewrite: path => path.replace(/^\/api/, '') // 去掉 /api 前缀
13.             }
14.         }
15.     }

复制代码

3、package.json内容修改如下

1.   "scripts": {
2.     "serve": "vue-cli-service serve --mode dev",
3.     "build": "vue-cli-service build --mode prod",
4.     "lint": "vue-cli-service lint"
5.   },

复制代码

5、axios封装

1. import axios from 'axios'
3. const service = axios.create({
4.     baseURL: process.env.VUE_APP_BASE_API,
5.     timeout: 5000
6. })
7. // console.log(process.env.VUE_APP_BASE_API)
8. // 请求拦截器
9. service.interceptors.request.use(
10.     config => {
11.         // 添加请求头等前置处理
12.         config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
14.         return config
15.     },
16.     error => {
17.         // 请求错误处理
18.         console.log('Request Error:', error)
19.         return Promise.reject(error)
20.     }
21. )
23. // 响应拦截器
24. service.interceptors.response.use(
25.     response => {
26.         // 响应后处理
27.         if (response.status === 200 && response.data.code === 200) {
28.             return Promise.resolve(response.data.data)
29.         } else {
30.             return Promise.reject(response.data)
31.         }
32.     },
33.     error => {
34.         console.log('Response Error:', error)
35.         return Promise.reject(error)
36.     }
37. )
39. export default service

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。