vite2 + Vue3中axios的封装,代理

开始之前先说一下,

process这个东西是nodejs中内置的,而且不需要require引入,vue2中我们可以通过process.env.NODE_ENV 来判断当前环境、通过process.env.VUE_APP_<自定义名称>,来获取.env、.env.development、.env.production配置文件中的变量(普通.vue文件和vue.config.js文件都可以获取到)。

但是在vite2中移除了process,普通页面或者js文件中可以通过import.meta.env来获取上面配置文件的变量,vite.config.js中 需要 引入 loadEnv 来自于vite,然后通过loadEnv(mode, process.cwd())获取,(参数mode为开放模式或生产模式),下面也会有写到。并且.env这种文件需要VITE_<自定义名称>才行

可以参考 -> vite环境变量和模式

1.安装 axios

npm install axios --save 

2.简单封装axios(在utils下新建request.js) 

request.js


import axios from 'axios'
// import qs from 'querystring'

// 根据环境变量 统一设置 域名 前缀
axios.defaults.baseURL = import.meta
  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vite+vue3项目,你可以通过封装axios来处理网络请求。下面是一个简单的示例: 1. 首先,安装axios依赖: ```bash npm install axios ``` 2. 创建一个`api.js`文件来封装axios: ```javascript import axios from 'axios'; // 创建一个axios实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置接口的基础url timeout: 5000 // 请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( config => { // 在发送请求之前做一些处理,例如添加token等 return config; }, error => { // 请求错误处理 console.error(error); return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( response => { // 对响应数据做一些处理,例如解析返回的json数据 return response.data; }, error => { // 响应错误处理 console.error(error); return Promise.reject(error); } ); export default instance; ``` 3. 在需要发送请求的地方引入`api.js`并使用: ```javascript import api from './api.js'; // 发送GET请求 api.get('/users') .then(response => { console.log(response); }) .catch(error => { console.error(error); }); // 发送POST请求 api.post('/users', { name: 'John Doe' }) .then(response => { console.log(response); }) .catch(error => { console.error(error); }); ``` 这样,你就可以在vite+vue3项目使用封装好的axios进行网络请求了。当然,你还可以根据项目的需要进行更多的封装和配置。希望对你有帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会说法语的猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值