vite2 + Vue3中axios的封装，代理

已于 2022-02-09 10:16:51 修改
阅读量2.5k 收藏 14
点赞数
CC 4.0 BY-SA版权
分类专栏： vue3 文章标签： vue.js
于 2022-01-25 16:19:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_51431448/article/details/122687029

开始之前先说一下，

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） <

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue3和vite项目的axios的配置封装(含proxy跨域)
weixin_68658847的博客
04-06 3678
vue3和vite项目的axios的配置封装(含proxy跨域)
vue3项目之axios封装以及vue.config.js 代理proxy配置
sinat_38628334的博客
12-09 6041
前后端分离项目基本都要解决跨域，除了后端设置外，前端通常通过代理解决跨域。由于vue-cli3创建的项目不会自动生成vue.config.js文件，需要手动创建在根目录下进行相关配置。 准备： 前端地址：http://10.13.123.123:8888 后端接口地址示例：http://10.13.456.456:9999/test/login/doLogin 封装axios： //src>request>http.js //main.ts引用：import http from "
vite2-axios:封装Axios接口数据缓存+取消重复请求
03-25
封装Axios接口数据缓存+取消重复请求 使用vite2 安装依赖yarn install 运行yarn dev 详细文档 《封装Axios》 服务端节点+ mongodb 地址： :
vite+vue3项目中axios的封装
yuan0209的博客
11-25 4325
axios在vite+vue3+ts项目的封装
vue3+vite配置.env文件环境变量
最新发布
2401_82591622的博客
05-25 941
通过合理配置.env文件，可以有效管理项目中的环境变量，确保在不同环境下应用的正确运行和安全性。以下是一些关键点：（1）使用和.env.test文件来管理不同环境的配置。（2）确保所有环境变量以VITE_开头，以便在客户端代码中访问。（3）不要在.env文件中存储敏感信息。（4）使用.gitignore文件排除.env文件，避免敏感信息泄露。
vue3+vite封装配置axios
码农键盘上的梦
06-28 1052
vue3+vite封装配置axios
vue3.0+vite项目关于域名代理配置以及axios的二次封装
maoxiaozhu的博客
07-17 3706
1.在项目根目录下添加.env.development 和 .env.production 文件 (根据实际开发需求添加,比如 .env.text等)3. 找到vite.config.js,添加如下代码 完成 代理 配置。2.找到package.json 文件 添加如下代码。首先在项目中安装 axios, (基于node环境)(1) .env.development 文件内容。(2) .env.production 文件内容。关于axios的二次封装。新建一个api.js文件 : 代码如下。
vue3+vite的axios的封装与全局使用
qq_60654563的博客
10-21 3590
axios封装、跨域获取数据
vue3+ts+less+vite+pinia+axios基础封装项目模版
03-26
Vue 3 Vue 3是Vue.js的最新版本，带来了许多改进和新特性，包括更快的性能、更小的体积、更好的TypeScript支持以及Composition API等。使用Vue 3，开发者可以更加高效地构建用户界面，并享受更好的开发体验。 ...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
vue+ts下对axios的封装实现
10-15
在Vue.js和TypeScript的开发环境中，我们常常需要对第三方库如axios进行封装，以便更好地管理和定制网络请求。本文将详细介绍如何在Vue+TS项目中对axios进行封装，包括设置拦截器来处理请求和响应。 首先，确保你...
vue3+vite封装axios
weixin_57925162的博客
05-10 1041
新建store.ts文件取token和用户名。新建api.ts文件配置接口。Vite文件配置请求地址。
cool-vue-vite-cli：使用vite2 vue3 axios vuex vue-router的测试演示
02-20
vite2 vue3 axios vuex vue-router的测试演示 跑 npm run dev or yarn dev 建造 npm run build or yarn build
vue3.0+axios0.27+vuecli代理跨域配置
dbeidouxingf的博客
09-26 195
vue3.0代理跨域
Vite + Vue3 封装 Axios 并做防重复提交 同一接口 [请求未返回结果、2秒内禁止重复提交]（超详细）
Etc.End的博客
04-01 2563
是一个基于Promise的HTTP网络请求库，可以用于浏览器和node.js。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。它可以帮助我们更轻松、简单地发出 AJAX 请求。
vite基础学习笔记：4. axios二次封装与代理跨域
smellsummer的博客
09-15 314
③响应拦截器，可以简化服务器返回的数据，处理http网络错误。②请求拦截器，一般可以在请求头中携带公共的参数：token。在src中新建utils文件夹（放入工具性文件），新建文件。①利用axios请求、响应拦截器功能。文件，将官网中的代码复制到文件中。参考vite官网文档。
vue3的axios的封装
2302_77290281的博客
09-04 550
vue3的axios的封装
Vite+vue3+ts如何封装axios
weixin_48288941的博客
08-17 724
根据通用的方式都是建一个reques文件夹，再建一个reques.ts文件：路径：reques/request.ts，内容如下：（初版能用就行，后面研究深了，再优化吧）建了一个api文件夹，用于存放系统范文后端的所有请求ts。使用qs(qs是一个流行的查询参数序列化和解析库)我现在要查询后台用户信息。
前端vue3分享——项目封装axios、vite使用env环境变量
热门推荐
编程知识分享，主打前端
09-16 3万+
大家好，我是yma16，本文分享关于前端vue3分享——项目封装axios、使用env环境变量。csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板认识vite_vue3 初始化项目到打包什么是axiosaxios是一个流行的JavaScript库，用于在浏览器和Node.js环境中进行HTTP请求。下面是axios的原理：Axios是基于Promise构建的，它可以使用async/await，因此在发出请求时，返回的是一个Promise对象。
vite+vue3项目axios的封装
07-16
在vite+vue3项目中，你可以通过封装axios来处理网络请求。下面是一个简单的示例： 1. 首先，安装axios依赖： ```bash npm install axios ``` 2. 创建一个`api.js`文件来封装axios： ```javascript import axios from &#39;axios&#39;; // 创建一个axios实例 const instance = axios.create({ baseURL: &#39;https://api.example.com&#39;, // 设置接口的基础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 &#39;./api.js&#39;; // 发送GET请求 api.get(&#39;/users&#39;) .then(response => { console.log(response); }) .catch(error => { console.error(error); }); // 发送POST请求 api.post(&#39;/users&#39;, { name: &#39;John Doe&#39; }) .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、付费专栏及课程。

余额充值