当前位置: 首页 > news >正文

【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)

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 Vue 【Vue3】env环境变量的配置和使用&#xff08;区分cli和vite&#xff09; 文章目录 Vue前言一、常见用法二、vue3cli封装接口1..env配置2..dev(开…...

Java8 Optional常用方法使用场景

前言&#xff1a; Optional 是 Java 8 的新特性&#xff0c;专治空指针异常&#xff08;NullPointerException, 简称 NPE&#xff09;问题&#xff0c;它是一个容器类&#xff0c;里面只存储一个元素&#xff08;这点不同于 Conllection&#xff09;。 为方便用户通过 Lambda 表…...

isscc2024 short course4 In-memory Computing Architectures

新兴的ML加速器方法&#xff1a;内存计算架构 1. 概述 内存计算&#xff08;In-memory Computing&#xff09;架构是一种新兴的机器学习加速器方法&#xff0c;通过将计算能力集成到存储器中&#xff0c;以减少数据移动的延迟和能耗&#xff0c;从而提高计算效率和性能。这种方…...

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.雪崩问题 如何做好后备方案就是后续&#xff1a; 2.雪崩解决方案 某一个服务的线程是固定的&#xff0c;出现故障线程占满后&#xff0c;就不会让取调用这个服务&#xff0c;对其他服务就没有影响。 3.Sentinel ①初识Sentinel 配置过程&#xff1a;day05-服…...

住宅IP?

住宅IP是由主要运营商&#xff08;如电信、移动、联通等&#xff09;为用户开通的宽带业务所分配的IP地址。这些IP地址是真实的、具有实际位置的IP&#xff0c;与普通用户的设备IP和宽带网络IP一致。它们不是连续的&#xff0c;而是散点分布&#xff0c;这使得它们在使用时更加…...

SpringBoot实现邮箱验证码

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

GPT提示词技巧,使用教程,国内版官网直达,非套壳

GPT提示词技巧&#xff0c;使用教程&#xff0c;国内版官网直达&#xff0c;非套壳 主站点&#xff1a;https://chatgpt-plus.top&#xff08;江苏福建地区打不开&#xff0c;需要魔法&#xff09; 店铺地址&#xff1a;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集群&#xff0c;发现在其中一套k8s环境中&#xff0c;在Pod内无法访问Service Name&#xff0c;访问了很多次&#xff0c;偶尔又能通&#xff0c;使用Service的IP能正常访问&#xff0c;域名解析的问题基本确定与CoreDNS有关系&#xff0c;于是开始了一系列…...

【JAVA基础之网络编程】UDP和TCP协议以及三次握手和四次挥手的过程

&#x1f525;作者主页&#xff1a;小林同学的学习笔录 &#x1f525;mysql专栏&#xff1a;小林同学的专栏 目录 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大数据的电影市场预测分析系统设计与实现

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…...

消息传递与集成:使用Springboot进行异步通信

消息传递与集成&#xff1a;使用Spring Boot进行异步通信 在现代的分布式系统中&#xff0c;异步通信已经成为了一种常见的设计模式。通过使用消息队列和事件驱动架构&#xff0c;我们可以实现系统之间的解耦&#xff0c;提高系统的可扩展性和可靠性。本文将介绍如何使用Sprin…...

【论文速读】Transformer:Attention Is All You Need

Transformer&#xff1a;Attention Is All You Need 摘要模型架构注意力模型Scaled Dot-ProductMulti-Head Attention Position-wise Feed-Forward NetworksEmbeddings and SoftmaxPositional Encoding 摘要 我们提出了一种新的简单的网络架构&#xff0c;Transformer&#xf…...

小短片创作-组装场景(一)

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

二元关系表示

一、二元关系的定义和表示 什么是二元关系&#xff1f;对集合A和B&#xff0c;A\timesB的任意子集R为A到B的一个二元关系。当AB时&#xff0c;A\timesA的任一子集R称为A上的一个二元关系。在不引起误解的情况下&#xff0c;二元关系可简称关系。 若|A|m,|B|n&#xff0c;则A到…...

Android Audio基础——AudioFlinger音频流管理(八)

从前面 AudioTrack、PlaybackThread、输出流设备三者的关系中,我们看到 AudioTrack 把音频流数据送入到对应的 PlaybackThread 中,那么应用进程是如何控制音频流的开始播放 start()、停止播放 stop()、暂停播放 pause()。这一章节我们就来继续分析。 一、音频流管理 应用进程…...

二进制部署k8s集群 部署高可用master节点

目录 本次部署的环境 一、master02 节点部署 二、负载均衡部署 安装nginx服务 部署keepalive服务 修改node节点上的配置文件 在master节点上创建pod 三、部署 Dashboard 二进制部署k8s集群部署的步骤总结 &#xff08;1&#xff09;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与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

ios苹果系统,js 滑动屏幕、锚定无效

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

vue3+vite项目中使用.env文件环境变量方法

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

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

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