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

news2024/11/15 18:04:33

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,
})

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PyTorch 2.2 中文官方教程(一)

PyTorch 秘籍 PyTorch 秘籍 原文:pytorch.org/tutorials/recipes/recipes_index.html 译者:飞龙 协议:CC BY-NC-SA 4.0 秘籍是关于如何使用特定 PyTorch 功能的简短、可操作的示例,与我们的全长教程不同。 PyTorch 原型示例 原文…

7机器人位姿的数学描述与坐标变

由上次刚体的空间转动直接切换为机器人相关术语。 1.机器人位姿的数学描述与坐标变换 1.1位姿描述 {B}相对于{A}的姿态描述用3x3矩阵表示为: 式中为三个单位正交主矢量,分别表示刚体坐标系{B}的三个坐标轴XBYBZB在参考系{A}中的方位,∠XBXA表…

单片机——FLASH(2)

文章目录 flash (stm32f40x 41x的内存映射中区域详解)flash写数据时 flash (stm32f40x 41x的内存映射中区域详解) Main memory 主存储区 放置代码和常数 System memory 系统存储区 方式bootloader代码 OTP区 一次性可编程区 选项…

MYSQL存储过程(含入参、出参)

1、创建库存表语句 -- eladmin.t_stock definitionCREATE TABLE t_stock (id bigint(20) NOT NULL AUTO_INCREMENT,quantity bigint(20) NOT NULL,PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT4101 DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_bin; id为主键,便于…

YOLOv7独家原创改进:大核卷积涨点系列| Shift-ConvNets,稀疏/移位操作让小卷积核也能达到大卷积核效果 | 2024年最新论文

💡💡💡本文独家改进:大的卷积核设计成为使卷积神经网络(CNNs)再次强大的理想解决方案,Shift-ConvNets稀疏/移位操作让小卷积核也能达到大卷积核效果,创新十足实现涨点,助力YOLOv8 💡💡💡在多个私有数据集和公开数据集VisDrone2019、PASCAL VOC实现涨点 收录…

Elementplus报错 [ElOnlyChild] no valid child node found

报错描述&#xff1a;ElementPlusError: [ElOnlyChild] no valid child node found 问题复现&#xff08;随机例子&#xff09;&#xff1a; <el-popover placement"right" :width"400" trigger"click"><template #reference><e…

Linux介绍和命令使用

目录 目录 一、Linux简介 1.1 主流操作系统 1.2 Linux 发展历史 1.3 Linux系统版本 二、Linux安装 三、Linux 目录结构 四、Linux常用命令 4.1 基础常用命令说明 4.2 Linux 命令使用技巧 4.3 Linux 命令格式 4.4 进阶重点常用命令 4.4.1 拷贝移动命令 4.4.2 打包…

Linux下库函数、静态库与动态库

库函数 什么是库 库是二进制文件, 是源代码文件的另一种表现形式, 是加了密的源代码; 是一些功能相近或者是相似的函数的集合体. 使用库有什么好处 提高代码的可重用性, 而且还可以提高程序的健壮性;可以减少开发者的代码开发量, 缩短开发周期. 库制作完成后, 如何给用户…

【原创】Qt库open62541 MinGW编译

一、前言 为了统一公司的驱动层开发&#xff0c;准备采用OpcUA的方式转发底层数据&#xff0c;而服务器有Windows Server&#xff0c;也有CentOS&#xff0c;因此想用Qt开发一个基于MinGW的OpcUA Server&#xff0c;这样就能跨平台部署。这里记录一下&#xff0c;希望对你也有用…

【人工智能】人工智能 – 引领未来科技的潮流

写在前面 引言红利挑战结论 引言 人工智能是指使计算机系统表现出类似于人类智能的能力。其目标是实现机器具备感知、理解、学习、推理和决策等智能行为。人工智能的发展可以追溯到上世纪50年代&#xff0c;随着计算机技术和算法的不断进步&#xff0c;人工智能得以实现。 今天…

在C++的union中使用std::string(非POD对象)的陷阱

struct和union的对比 union最开始是C语言中的关键字&#xff0c;在嵌入式中比较常见&#xff0c;由于嵌入式内存比较稀缺&#xff0c;所以常用union用来节约空间&#xff0c;在其他需要节省内存的地方也可以用到这个关键字&#xff0c;写一个简单程序来说明union的用途 struc…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Stepper组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Stepper组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Stepper组件 鸿蒙&#xff08;HarmonyOS&#xff09;仅能包含子组件StepperIte…

SpringBoot和SpringMVC

目录 一、springboot项目 &#xff08;1&#xff09;创建springboot项目 &#xff08;2&#xff09;目录介绍 &#xff08;3&#xff09;项目启动 &#xff08;4&#xff09;运行一个程序 &#xff08;5&#xff09;通过其他方式创建和运行springboot项目 二、SpringMVC…

java学习06---方法

一 方法 方法&#xff08;method&#xff09;是程序中最小的执行单元 注意&#xff1a; 方法必须先创建才可以使用&#xff0c;该过程成为方法定义 方法创建后并不是直接可以运行的&#xff0c;需要手动使用后&#xff0c;才执行&#xff0c;该过程成为方法调用 二 方法的…

搭建macOS开发环境-1:准备工作

请记住&#xff1a; 最重要的准备工作永远是&#xff1a;备份数据 !!! 通过图形界面检查 Mac 的 CPU 类型&#xff1a; 在搭载 Apple 芯片的 Mac 电脑上&#xff0c;“关于本机”会显示一个标有“芯片”的项目并跟有相应芯片的名称&#xff1a; 通过命令行检查Mac的CPU类型 …

【Linux开发工具】yum命令详解

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1.概念2.yum的配置信…

Spring Cloud使用ZooKeeper作为注册中心的示例

简单的Spring Cloud应用程序使用ZooKeeper作为注册中心的示例&#xff1a; 1.新建模块&#xff1a; 2.勾选依赖&#xff1a; 3.在pom.xml文件中做出部分修改及添加Spring Cloud Zookeeper 依赖版本&#xff1a; 完整pom文件 <?xml version"1.0" encoding&q…

FlinkSql通用调优策略

历史文章迁移&#xff0c;稍后整理 使用DataGenerator 提前进行压测&#xff0c;了解数据的处理瓶颈、性能测试和消费能力 开启minibatch&#xff1a;"table.exec.mini-batch.enabled", "true" 开启LocalGlobal 两阶段聚合&#xff1a;"table.exec.m…

如何修复Mac的“ kernel_task” CPU使用率过高的Bug?

当计算机开始缓慢运行时&#xff0c;这从来都不是一件有趣的事情&#xff0c;但是当您弄不清它为何如此缓慢时&#xff0c;甚至会变得更糟。如果您已经关闭了所有程序&#xff0c;并且Mac上的所有内容仍然感觉像是在糖蜜中移动&#xff0c;这可能是令人讨厌的kernel_task导致高…

HTTP2: springboot启用http2

springboot http2应用条件 使用servlet 4.0jdk 9tomcat 9 springboot 开启h2 创建证书 创建脚本&#xff1a; keytool -genkey -keyalg RSA -alias wisely -keystore keystore.jks -storepass pass1234 -validity 4000 -keysize 2048添加springboot配置 server:port: 808…