【Vue3】封装axios请求(cli和vite)
原文作者:我辈李想
版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。
Vue
【Vue3】env环境变量的配置和使用(区分cli和vite)
文章目录
- Vue
- 前言
- 一、常见用法
- 二、vue3+cli封装接口
- 1..env配置
- 2..dev(开发环境,其他环境自己配置)
- 3.vue.config.js文件
- 4.封装axios请求
- 4.1 在api文件夹中新建request.js
- 4.2 新建接口rule.js
- 4.3 新建index.js
- 4.4 App.vue引用
- 4.5 全局使用api
前言
一、常见用法
我们将创建api文件夹,包含index.js和request.js,剩下的rule.js就是实际接口文件。
二、vue3+cli封装接口
vue3+cli的项目,配置中需要以VUE_APP开头。
1…env配置
VUE_APP_PORT = 8080
2…dev(开发环境,其他环境自己配置)
VUE_APP_API_HOST = '127.0.0.1'
VUE_APP_API_HOST = '8000'
VUE_APP_API_BASE_URL = "http://127.0.0.1:8000/api"VUE_APP_ENV = 'development'
3.vue.config.js文件
如果项目没有此文件,需要自己创建,位置参考第一部分截图。
这里的devServer配置表示代理,即将前端的host、port和路由代理至api接口。其中’/api’很重要,后边会用到。
下述代码表示将http://127.0.0.1:8080/api代理至http://127.0.0.1:8000/api)
const {defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,assetsDir: 'static',devServer: {// host: process.env.VUE_APP_HOST,// port: process.env.VUE_APP_PORT, //端口// https: false, //false关闭https,true为开启// open: true, //自动打开浏览器proxy: {'/api': {target: process.env.VUE_APP_API_BASE_URL,changeOrigin: true,pathRewrite: {'/api': ''}}}}
})
4.封装axios请求
4.1 在api文件夹中新建request.js
这里的baseURL: “/api"中的”/api",与第三部的代理一致。
// 导入axios
import axios from 'axios'const request = axios.create({// baseURL 将自动加在 url`前面,除非 url 是一个绝对 URL。// 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URLbaseURL: "/api",// timeout设置一个请求超时时间,如果请求时间超过了timeout,请求将被中断,单位为毫秒(ms)timeout: 60000,// headers是被发送的自定义请求头,请求头内容需要根据后端要求去设置,这里我们使用本项目请求头。headers: {'Accept': 'application/json','Content-Type': 'application/json','Access-Control-Allow-Origin': '*'}
})// 请求拦截器
request.interceptors.request.use(config => {// 在请求发送之前可以做一些处理,比如添加请求头等return config;},error => {// 请求错误处理return Promise.reject(error);}
);// 响应拦截器
request.interceptors.response.use(response => {// 在这里可以对响应数据进行处理return response.data;},error => {// 响应错误处理return Promise.reject(error);}
)export default request
4.2 新建接口rule.js
import request from './request.js'export function getrules(params) {return request({url: '/rule/rule/',method: 'get',params: params})
}export function postrule(data) {return request({method: 'post',data: data,url: '/rules'})
}export function updaterule(id, data) {return request({method: 'post',data: data,url: '/rules/${id}'})
}export default {getrules,postrule,updaterule,
}
4.3 新建index.js
import rule from './rule.js'export default {rule,
}
4.4 App.vue引用
<script setup>import {rule} from '@/api/rule.js'console.log('hello script setup2', rule.getrules())
</script>
4.5 全局使用api
修改项目的main.js文件,加载全局属性
import {createApp
} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'import router from "./router";
import store from "./store";
import api from "./api";const app = createApp(App)
app.config.globalProperties.$api = api // 挂载全局app.use(router).use(store).use(ElementPlus).mount('#app')
vue3一般的script
<script>// 请求rulesfunction get() {
console.log(this.$api.rule.getrules())}
</script>
vue3一般的script+setup
<script setup>// 请求rulesconst cns = getCurrentInstance()console.log(cns.appContext.config.globalProperties.$api)console.log('hello script setup')function get() {
console.log(cns.appContext.config.globalProperties.$api.rule.getrules())}
</script>
相关文章:

【Vue3】封装axios请求(cli和vite)
原文作者:我辈李想 版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。 Vue 【Vue3】env环境变量的配置和使用(区分cli和vite) 文章目录 Vue前言一、常见用法二、vue3cli封装接口1..env配置2..dev(开…...
Java8 Optional常用方法使用场景
前言: Optional 是 Java 8 的新特性,专治空指针异常(NullPointerException, 简称 NPE)问题,它是一个容器类,里面只存储一个元素(这点不同于 Conllection)。 为方便用户通过 Lambda 表…...

isscc2024 short course4 In-memory Computing Architectures
新兴的ML加速器方法:内存计算架构 1. 概述 内存计算(In-memory Computing)架构是一种新兴的机器学习加速器方法,通过将计算能力集成到存储器中,以减少数据移动的延迟和能耗,从而提高计算效率和性能。这种方…...
ubuntu 安装 kvm 启动虚拟机
1. 基础环境设置 #更新环境 apt update apt upgrade#配置网卡 cat >/etc/netplan/br.yml<<EOF network:ethernets:eth2: {}bridges:br0:interfaces:- eth2addresses:- 192.192.1.213/24gateway4: 192.192.1.1nameservers:addresses:- 8.8.8.8- 8.8.4.4 EOF #安装组件…...

[OpenGL] opengl切线空间
目录 一 引入 二 TBN矩阵 三 代码实现 3.1手工计算切线和副切线 3.2 像素着色器 3.3 切线空间的两种使用方法 3.4 渲染效果 四 复杂的物体 本章节源码点击此处 继上篇法线贴图 来熟悉切线空间是再好不过的。对于法线贴图来说,我们知道它就是一个2D的颜色纹理,根据rgb…...

SpringCloud微服务03-微服务保护-分布式事务-MQ基础-MQ高级
一、微服务保护 1.雪崩问题 如何做好后备方案就是后续: 2.雪崩解决方案 某一个服务的线程是固定的,出现故障线程占满后,就不会让取调用这个服务,对其他服务就没有影响。 3.Sentinel ①初识Sentinel 配置过程:day05-服…...
住宅IP?
住宅IP是由主要运营商(如电信、移动、联通等)为用户开通的宽带业务所分配的IP地址。这些IP地址是真实的、具有实际位置的IP,与普通用户的设备IP和宽带网络IP一致。它们不是连续的,而是散点分布,这使得它们在使用时更加…...

SpringBoot实现邮箱验证码
自行创建一个SpringBoot项目 导入SpringBoot所需要的邮箱验证码的包 <!--邮件发送--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId><version>2.6.1</version>…...

GPT提示词技巧,使用教程,国内版官网直达,非套壳
GPT提示词技巧,使用教程,国内版官网直达,非套壳 主站点:https://chatgpt-plus.top(江苏福建地区打不开,需要魔法) 店铺地址:https://buy.chatgpt-plus.top/ 选择plus账号进入&…...

MySQL多表关联查询习题
一、素材 -- Active: 1714203732007127.0.0.13306db_stu -- 1.创建student和score表 CREATE TABLE student ( id INT(10) NOT NULL UNIQUE PRIMARY KEY , name VARCHAR(20) NOT NULL , sex VARCHAR(4) , birth YEAR, department VARCHAR(20) , address VARCHAR(50) ); -- 创建…...

Android正向开发实现客户端证书认证
前言 如果第三方模块被混淆,那hook方式均不能生效。这时就需要根据系统包去定位校验的函数,因此需要对安卓开发者是如何实现客户端证书校验的有一定了解,接下来就介绍这部分内容。 开发者实现客户端证书校验的本质是:证书/密钥 + 代码。 在形式上有:证书校验、公钥校验和…...
【Kubernetes】Pod无法访问Service域名问题排查
背景 部署过多套k8s集群,发现在其中一套k8s环境中,在Pod内无法访问Service Name,访问了很多次,偶尔又能通,使用Service的IP能正常访问,域名解析的问题基本确定与CoreDNS有关系,于是开始了一系列…...

【JAVA基础之网络编程】UDP和TCP协议以及三次握手和四次挥手的过程
🔥作者主页:小林同学的学习笔录 🔥mysql专栏:小林同学的专栏 目录 1. 网络编程 1.1 概述 1.2 网络编程的三要素 1.2.1 IP地址 1.2.2 InetAddress 1.2.3 端口和协议 1.3 UDP协议 1.3.1 UDP发送数据 1.3.2 UDP接收数据 1.4…...
基于python+Django大数据的电影市场预测分析系统设计与实现
博主介绍: 大家好,本人精通Java、Python、C#、C、C编程语言,同时也熟练掌握微信小程序、Php和Android等技术,能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验,能够为学生提供各类…...
消息传递与集成:使用Springboot进行异步通信
消息传递与集成:使用Spring Boot进行异步通信 在现代的分布式系统中,异步通信已经成为了一种常见的设计模式。通过使用消息队列和事件驱动架构,我们可以实现系统之间的解耦,提高系统的可扩展性和可靠性。本文将介绍如何使用Sprin…...

【论文速读】Transformer:Attention Is All You Need
Transformer:Attention Is All You Need 摘要模型架构注意力模型Scaled Dot-ProductMulti-Head Attention Position-wise Feed-Forward NetworksEmbeddings and SoftmaxPositional Encoding 摘要 我们提出了一种新的简单的网络架构,Transformer…...

小短片创作-组装场景(一)
1、项目基础设置 通过第三人称模板,创建1个项目 1.自动曝光:关闭,因为要做专业的小短片,曝光需要手动控制。 2.扩展自动曝光中的默认亮度范围:启用 3.全局光照系统:选择屏幕空间光照(SSGI&am…...

二元关系表示
一、二元关系的定义和表示 什么是二元关系?对集合A和B,A\timesB的任意子集R为A到B的一个二元关系。当AB时,A\timesA的任一子集R称为A上的一个二元关系。在不引起误解的情况下,二元关系可简称关系。 若|A|m,|B|n,则A到…...
Android Audio基础——AudioFlinger音频流管理(八)
从前面 AudioTrack、PlaybackThread、输出流设备三者的关系中,我们看到 AudioTrack 把音频流数据送入到对应的 PlaybackThread 中,那么应用进程是如何控制音频流的开始播放 start()、停止播放 stop()、暂停播放 pause()。这一章节我们就来继续分析。 一、音频流管理 应用进程…...

二进制部署k8s集群 部署高可用master节点
目录 本次部署的环境 一、master02 节点部署 二、负载均衡部署 安装nginx服务 部署keepalive服务 修改node节点上的配置文件 在master节点上创建pod 三、部署 Dashboard 二进制部署k8s集群部署的步骤总结 (1)k8s的数据存储中中心的搭建 etcd &…...

Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...

ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...

vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...