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

最新推荐文章于 2024-08-31 09:13:48 发布

Simaoya

最新推荐文章于 2024-08-31 09:13:48 发布

阅读量1.1k

点赞数 8

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Anlittlecat/article/details/140203334

版权

vue 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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