vite项目配置根据不同的打包环境使用不同的请求路径VITE_BASE_URL,包括报错解决

vite环境配置可以看官方文档:环境变量和模式 | Vite 官方中文文档

创建环境配置文件

在项目根目录下面创建.env和.env.production文件,.env是开发环境使用的,.env.production是生产环境使用的。

.env文件:

# 基本环境
VITE_APP_NAME='开发环境'
# 基本请求地址
VITE_BASE_URL='http://192.168.1.243:9080'

.env.production:

# 基本环境
VITE_APP_NAME='生产环境'
# 基本请求地址: 这样做的好处是当你把项目部署到对应的域名或者ip下面后,会自动使用该域名或ip的地址,也就是当前地址
VITE_BASE_URL=''

项目中使用的话,会提示 import.meta 上没有env属性:

修改tsconfig.json添加:

"types": ["vite/client"],

就不会有提示了: 

在项目中使用

比如配置axios请求的时候,要修改url地址

const requests = axios.create({
    //配置对象
    //基础路径,requests发出的请求在端口号后面会跟改baseURl
    baseURL: `${import.meta.env.VITE_BASE_URL}/v1`,
    //代表请求超时的时间5s
    timeout: 5000,
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/378136.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

敏捷产品是双轨开发而非双轨制

长话短说: 如果你以前听说过“双轨开发”这个术语,本文将解释它的来源和含义。以下是要点 开发工作侧重于可预测的结果和可保证的质量 探索工作侧重于快速学习和快速验证 探索和发展被可视化为两条轨道,因为这是两种工作,两种思…

Leetcode3020. 子集中元素的最大数量

Every day a Leetcode 题目来源:3020. 子集中元素的最大数量 解法1:哈希 枚举 用一个哈希表统计数组 nums 中的元素及其出现次数。 暴力枚举数组中的数,作为 x,然后不断看 x2,x4,⋯ 在数组中的个数。直到个数不足 2 个为止&a…

微信小程序新手入门教程四:样式设计

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,决定了 WXML 的组件会怎么显示。 WXSS 具有 CSS 大部分特性,同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS …

Unity AnimationRigging无法修改权重?

个人理解,已解决无法修改权重的问题: unity自带的动画系统是在FixUpdate和Update之后LateUpdate之前执行,如果在这FixedUpdate或Update函数内更新AnimationRigging内的权重后,内部动画系统会覆盖权重的修改,导致无法正确更新&…

网神 SecGate 3600 防火墙 route_ispinfo_import_save 文件上传漏洞复现

0x01 产品简介 网神SecGate 3600防火墙是基于状态检测包过滤和应用级代理的复合型硬件防火墙,是专门面向大中型企业、政府、军队、高校等用户开发的新一代专业防火墙设备,支持外部攻击防范、内网安全、网络访问权限控制、网络流量监控和带宽管理、动态路由、网页内容过滤、邮…

【开源】JAVA+Vue.js实现社区买菜系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 数据中心模块2.1.2 菜品分类模块2.1.3 菜品档案模块2.1.4 菜品订单模块2.1.5 菜品收藏模块2.1.6 收货地址模块 2.2 可行性分析2.3 用例分析2.4 实体类设计2.4.1 菜品分类模块2.4.2 菜品档案模块2.4.3…

SQL在云计算中的新角色:重新定义数据分析

文章目录 1. 云计算与数据分析的融合2. SQL在云计算中的新角色3. 分布式SQL查询引擎4. SQL-on-Hadoop解决方案5. SQL与其他数据分析工具的集成6. 实时数据分析与SQL7. SQL在云数据仓库中的角色8. 安全性与隐私保护9. SQL的未来展望《SQL数据分析实战(第2版&#xff…

【MySQL进阶之路】BufferPool底层设计(中)

欢迎关注公众号(通过文章导读关注:【11来了】),及时收到 AI 前沿项目工具及新技术的推送! 在我后台回复 「资料」 可领取编程高频电子书! 在我后台回复「面试」可领取硬核面试笔记! 文章导读地址…

u8 bit0 :1; “:”位字段的声明(也称为位段)

在C语言中,冒号(:)用于声明bit字段,也称为位域(Bit-field)。位域允许我们在结构体中对结构成员进行位级的精确操作,主要用于对寄存器和硬件操作进行描述和访问。冒号后面的数字表示该位域的位宽度。 在通信中&#xff…

Airtest实现在手机界面快速批量采集数据

Airtest实现在手机界面快速批量采集数据 一、问题 Airtest使用的poco方法比较慢,寻找差不多一周,看完这篇文章能节省一周时间,希望帮到大家。二、解决思路 使用Airtest图像识别,这样就会速度上提升效率。 三、解决办法 使用页面规律,要找到每条数据的附近规律(一般是图…

【Scala】1. 变量和数据类型

1. 变量和数据类型 1.1 for begining —— hello world 新建hello.scala文件,注意object名字与文件名一致。 object hello { def main(args:Array[String]): Unit { println("hello world!") } }运行后打印结果如下: hello world!Pr…

cmd卸载软件

如果使用的是Win 10,并且需要在磁盘内释放一些空间,可以直接在命令提示符里卸载不再使用的应用程序,和小编一起来看看详细的步骤吧。 步骤如下: 以管理员身份运行命令提示符来卸载程序。在Windows搜索框中,键入“ cm…

阿里云服务器多少钱一年?2024年阿里云服务器租用价格表

2024年阿里云服务器租用价格表更新,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核4G服…

14 归并排序和其他排序

1.归并排序 2.计数排序 1. 归并排序 基本思想 建立在归并操作上的一种排序算法,采用分治法的一个典型应用。将已有序的子序列合并,得到完全有序的序列,将两个有序表合成一个称为二路归并。 原数组无序,以中间分割为两个数组,…

前端异步相关知识总结

目录 一、同步和异步简介 同步(按顺序执行) 异步(不按顺序执行) 异步出现的原因和需求 二、实现异步的方法 回调函数 Promise 生成器Generators/ yield async await 三、promise和 async await 区别 概念 两者的区别 …

ctfshow——命令执行

文章目录 web 29——通配符*绕过web30——调用其他命令执行函数web 31——参数逃逸web 32-web 36——配合文件包含伪协议web 37-web 39——文件包含web 40—— web 29——通配符*绕过 i不区分大小写,直接?csystem(tac fl*.php); web30——调用其他命令执行函数 调用…

二进制安全虚拟机Protostar靶场(7)heap2 UAF(use-after-free)漏洞

前言 这是一个系列文章&#xff0c;之前已经介绍过一些二进制安全的基础知识&#xff0c;这里就不过多重复提及&#xff0c;不熟悉的同学可以去看看我之前写的文章 heap2 程序静态分析 https://exploit.education/protostar/heap-two/#include <stdlib.h> #include &…

JavaScript基础第四天

JavaScript 基础第四天 今天我们学习js的函数&#xff0c;包括普通函数、匿名函数、箭头函数以及函数作用域。 1. 函数的初体验 1.1. 什么是函数 函数是 JavaScript 中的基本组件之一。一个函数是 JavaScript 过程一组执行任务或计算值的语句。要使用一个函数&#xff0c;你…

Django模板(二)

标签if 标签在渲染过程中提供使用逻辑的方法,比如:if和for 标签被 {% 和 %} 包围,如下所示: 由于在模板中,没有办法通过代码缩进判断代码块,所以控制标签都需要有结束的标签 if判断标签{% if %} {% endif %} : # athlete_list 不为空 {% if athlete_list %}# 输出 ath…

[C#] 如何使用ScottPlot.WPF在WPF桌面程序中绘制图表

什么是ScottPlot.WPF&#xff1f; ScottPlot.WPF 是一个开源的数据可视化库&#xff0c;用于在 WPF 应用程序中创建高品质的绘图和图表。它是基于 ScottPlot 库的 WPF 版本&#xff0c;提供了简单易用的 API&#xff0c;使开发人员能够通过简单的代码创建各种类型的图表&#…