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

news/2024/7/8 9:12:56 标签: vue.js, javascript, 前端
1、根目录底下新建.env.devenv.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


http://www.niftyadmin.cn/n/5536908.html

相关文章

着色器预热?为什么 Flutter 需要?为什么原生 App 不需要?那 Compose 呢?Impeller 呢?

依旧是来自网友的问题,这个问题在一定程度上还是很意思的,因为大家可能会想,Flutter 使用 skia,原生 App 是用 skia ,那为什么在 Flutter 上会有着色器预热(Shader Warmup)这样的说法&#xff1…

WPF更新UI线程实现进度条功能

WPF更新UI线程实现进度条功能 我的写法 <Page x:Class"CableInspectionScreen.ConfigPage"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc"http:/…

【Eureka服务治理深度解析】探索灰度发布的实现之道

标题&#xff1a;【Eureka服务治理深度解析】探索灰度发布的实现之道 Eureka作为Netflix开源的服务发现框架&#xff0c;在微服务架构中扮演着核心角色。灰度发布作为一种重要的部署策略&#xff0c;允许逐步推出新版本的服务&#xff0c;以减少对用户的影响并提高系统的稳定性…

AWS云创建EC2与所需要注意事项

AWS云&#xff08;Amazon Web Services&#xff09;作为全球领先的云计算服务提供商&#xff0c;为用户提供了丰富的云计算服务。其中&#xff0c;EC2&#xff08;Elastic Compute Cloud&#xff09;是AWS云中的一项重要服务&#xff0c;可以帮助用户轻松创建和管理虚拟服务器实…

SQL SERVER 设置端口

要在SQL Server中设置端口&#xff0c;可以通过SQL Server Configuration Manager来完成。以下是详细的步骤&#xff1a; 1. 打开SQL Server Configuration Manager 在Windows中&#xff0c;按 Win R 键打开运行窗口。输入 SQLServerManager<version>.msc 并按回车。例…

Nginx对冒号特殊字符的处理问题

location /minio/weboffice/weboffice/shapes/ {proxy_pass http://127.0.0.1/minio/weboffice/weboffice/shapes/;}location /minio/weboffice/weboffice/shapes/ {proxy_pass http://127.0.0.1;}nginx对于上诉两种方式&#xff0c;实现的转发效果是一样的&#xff0c;但是在路…

【SpringCloud】Ribbon源码解析

ribbon是一个负载均衡组件&#xff0c;它可以将请求分散到多个服务提供者实例中&#xff0c;提高系统的性能和可用性。本章分析ribbon是如何实现负载均衡的 1、LoadBalanced 消费者在引入ribbon组件后&#xff0c;给http客户端添加LoadBalanced注解就可以启用负载均衡功能。Lo…

一些感想。

1.double必须用double的输出&#xff08;“%lf”&#xff09; 我还以为是什么bug。。 2.sqrt&#xff0c;pow只要include cmath之后就能用了&#xff0c;我pow()没有devc艹的提示&#xff0c;还以为我记错了&#xff0c;早知道运行一下了 cnm公式写错了 #include <iostre…