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

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

http://www.kler.cn/a/231758.html

相关文章:

  • WPF Gif图谱 如果隐藏的话会存在BUG
  • 开源音乐分离器Audio Decomposition:可实现盲源音频分离,无需外部乐器分离库,从头开始制作。将音乐转换为五线谱的程序
  • Linux最深刻理解页表于物理内存
  • 怎样在软件设计中选择使用GOF设计模式
  • 2024山西省网络建设运维第十八届职业院校技能大赛解析答案(3. ansible 服务)
  • 十:详解HTTP的请求行
  • 挑战杯 opencv 图像识别 指纹识别 - python
  • C语言:函数递归
  • 尝试gtp2go3.8解析
  • mac电脑flutter环境配置,解决疑难问题
  • 分享86个行业PPT,总有一款适合您
  • 从零开始手写mmo游戏从框架到爆炸(六)— 消息处理工厂
  • Redis核心技术与实战【学习笔记】 - 21.Redis实现分布式锁
  • 职业发展 - 一个专注于嵌入式物联网架构设计的攻城狮(转载)
  • npm 上传一个自己的应用(4) 更新自己上传到NPM中的工具版本 并进行内容修改
  • Spring IoC容器(四)容器、环境配置及附加功能
  • Docker进阶篇-CIG重量级监控系统
  • Android13新特性之预测返回手势
  • next项目页面性能调优
  • json、jsonlines格式化显示
  • MySQL温故篇(一)SQL语句基础
  • GEE入门篇|栅格数据集概述(四):其他卫星产品
  • C语言笔试题之实现C库函数 strstr()(设置标志位)
  • k8s弃用docker后使用ctr导入镜像
  • Vue前端框架--Vue工程项目问题总结{脚手架 Vue-cli}
  • 【附代码】NumPy加速库NumExpr(大数据)