前端vue3分享——项目封装axios、vite使用env环境变量

简介: 前端vue3分享——项目封装axios、vite使用env环境变量

⭐前言

大家好,我是yma16,本文分享关于前端vue3分享——项目封装axios、使用env环境变量。

该系列往期文章:

csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

认识vite_vue3 初始化项目到打包

什么是axios

axios是一个流行的JavaScript库,用于在浏览器和Node.js环境中进行HTTP请求。下面是axios的原理:

Axios是基于Promise构建的,它可以使用async/await,因此在发出请求时,返回的是一个Promise对象。这个Promise对象中包含了请求成功和请求失败的回调函数。

Axios发送的请求被封装成一个请求对象。请求对象包括请求url、请求方法、请求头、请求数据等信息。在创建这个请求对象时,可以设置全局的默认值,这些默认值可以用于所有请求。

Axios是通过XMLHttpRequest对象来实现请求的。在浏览器中,XMLHttpRequest是通过ActiveXObject对象创建的。在Node.js中,它使用http或https模块来实现请求。

Axios可以进行拦截器的设置,它提供了全局请求拦截器和全局响应拦截器。这些拦截器可以用于在请求或响应之前进行一些处理,比如添加请求头或对响应进行一些处理。

Axios还提供了取消请求的功能。这个功能是通过一个CancelToken对象来实现的。使用这个对象可以在发送请求后取消这个请求。这对于用户取消请求或者在组件销毁时取消请求非常有用。

Axios提供了一些高级功能,比如支持请求和响应的转换、自动处理不同数据格式(如JSON、FormData、Binary等)以及在Node.js中处理代理等。

vite处理环境变量

Vite 的工作原理主要分为两部分:开发时编译和生产时打包。在开发时,Vite 利用 ES Modules 特性实现了单文件组件快速编译和热更新。在生产时,Vite 利用 Rollup 进行打包,生成静态文件。

在开发模式下,Vite 会通过一个简单的 HTTP 服务器来服务于应用程序。当浏览器请求应用程序时,Vite 会查找所有的入口文件,并生成一个映射表,把每个文件的依赖关系记录下来。当应用程序需要加载某个模块时,Vite 会首先解析该模块的依赖,并根据依赖关系加载其他模块。在加载过程中,Vite 会利用浏览器的缓存机制,以及服务端的缓存机制来优化加载速度。

对于环境变量的处理,Vite 的原理是通过对项目中 import.meta 对象的支持来实现的。import.meta 对象提供了当前模块的元数据信息,包括模块的 URL 和环境变量等信息。在 Vite 中,用户可以在 vite.config.js 配置文件中设置环境变量,然后通过 import.meta.env 对象来访问这些变量,从而动态地读取环境变量。在打包时,Vite 会自动将这些环境变量编译到生成的静态文件中,从而实现在生产环境中使用环境变量的功能。

⭐vue3封装统一的axios请求

官方文档:https://www.axios-http.cn/docs/interceptors

封装一个简单的axios,在每次请求的请求头都加上 headers: {'X-Custom-Header': 'yma16'}

💖 请求拦截器

http.ts

import axios from "axios";
// 实例
const createInstance = (baseURL:string)=>{
    return axios.create({
        baseURL:baseURL,
        timeout: 1000,
        headers: {'X-Custom-Header': 'yma16'}
    })
};
// @ts-ignore
const http:any=createInstance('');
// 添加请求拦截器
http.interceptors.request.use(function (config:any) {
    // 在发送请求之前做些什么
    return config;
}, function (error:any) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response:any) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error:any) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});
export {http};

在api调用的时候引入http

这是登录的api

import {http} from "../..//http/index";
export const loginUser: any = (params: any) => {
  return http.post("/cloudApi/user/login", params);
};
export const registerUser: any = (params: any) => {
  return http.post("/cloudApi/user/register", params);
};

登录查看请求头出现X-Custom-Header:yma16

⭐vue3使用env环境变量

💖 vite env变量规则

变量规则

以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

在.env 定义

VITE_APP_HOST= http://localhost:9090/

在.env.development定义

VITE_APP_HOST= http://localhost:9090/

在.env.production定义

VITE_APP_HOST= https://yongma16.xyz/back-front/

使用import.meta调用env环境变量

在util工具目录下编写一个全局获取变量的方法globalEnv

export const globalEnv=()=>{
    return import.meta.env
};

💖 vite.config获取env参数

vite.config获取env参数使用oadEnv

process.cwd() 可以获取当前路径

vite开发环境代理切换

mode参数为config参数的模式

mode 本运行为development

修改vite.config.ts

import { defineConfig,loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
// @ts-ignore
import { resolve } from "path";
// @ts-ignore
import Components from "unplugin-vue-components/vite";
// @ts-ignore
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig(({mode})=>{
  // 运行模式
  console.log('mode',mode)
  // 当前路径
  console.log('process.cwd()',process.cwd())
  // @ts-ignore
  const env=loadEnv(mode,process.cwd())
  console.log('env',env)
  const proxy={
    "^/cloudApi/": {
      target: env.VITE_APP_HOST,
      changeOrigin: true,
      ws: true,
      rewrite: (path) => path.replace(/^\/cloudApi/, ""),
    },
  };
  return {
    // 打包相对路径
    base: './',
    server: {
      port: 3000,
      open: true,
      cors: true,
      proxy: {
        ...proxy
      },
    },
    "css": {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          patterns: [resolve(__dirname, "./src/style/main.less")],
        },
      },
    },
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
      },
    },
    plugins: [
      vue(),
      Components({
        resolvers: [AntDesignVueResolver()],
      }),
    ],
  }
});

⭐总结

项目封装axios、vite使用env环境变量主要是统一代码规范,便于开发且后续好维护。

💖 编码sliod原则

SOLID 原则是一种设计原则,用于指导编写可维护、可扩展、易于理解和可复用的代码。

  • 单一职责原则 (Single Responsibility Principle, SRP): 一个类或模块只负责一项职责,降低耦合度。
  • 开闭原则 (Open/Closed Principle, OCP): 类和模块应该对扩展开放,对修改关闭,通过抽象化来实现。
  • 里氏替换原则 (Liskov Substitution Principle, LSP): 子类应该可以替换父类并且仍能正常运行。
  • 接口隔离原则 (Interface Segregation Principle, ISP): 不应该强迫使用者依赖于他们不需要的接口。
  • 依赖反转原则 (Dependency Inversion Principle, DIP): 抽象不应该依赖细节,细节应该依赖于抽象。

这些原则可以帮助开发者设计出高质量的面向对象代码,并促进代码的可维护性和可扩展性,提高代码的复用度。

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!


目录
相关文章
|
2天前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
3天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
227 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
2月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合?
前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
37 1
|
3月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
256 14
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
70 0
|
3月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
3月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
3月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
168 1
|
3月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT

热门文章

最新文章