【无标题】vite配置代理--loadEnv

环境变量的定义是:会根据当前那代码环境产生值的变化的变量
在 Vite 项目中,使用环境变量提供了一种在不同环境下定制化应用行为的方式。通过读取环境变量,我们可以设置不同的配置信息。
开发中常见的场景有:
区分开发和生产环境

通过环境变量可以方便地区分当前应用运行的是开发还是生产环境。例如,在开发环境下,可以启用控制台日志和调试工具,而在生产环境下,则需要关闭这些功能以提升性能和安全性。
配置应用访问的 API 地址
应用通过 HTTP 请求与后端 API 进行通信。在开发和生产环境下,API 服务器的地址可能不同。通过环境变量,可以将 API 地址从应用代码中抽离出来,并在不同环境中指定不同的地址。
其他配置信息
除了 API 地址外,应用还有很多其他的配置信息,例如应用标题、主题颜色、版本号等。这些信息可以使用环境变量进行管理,避免硬编码在应用代码中,提高代码的可维护性和可扩展性。
构建时的配置
在开发环境下启用调试模式,在生产环境下禁用控制台输出等。此外,还可以使用环境变量来进行资源定位,例如根据当前环境选择不同的 API 地址、CDN 路径等。

import.meta.env 和 loadEnv

import.meta.env

  • 在.env文件中定义环境变量(vite环境必须以VITE_开头)
    在这里插入图片描述
  • 在代码中可以直接使用import.meta.env读取当前环境变量
    在这里插入图片描述

loadEnv
这个api是提供给在vite.config.js中访问当前环境变量使用,一般用作代理切换

  • 在代码中需要先导入Vite提供的环境变量模块
    在这里插入图片描述
  • 代理配置信息
    在这里插入图片描述

使用注意事项

  • import.meta.env 和 loadEnv 的使用场景不同
  • import.meta.env 是在运行时获取环境变量的值,适用于应用程序代码中需要动态获取环境变量的场合。(配置文件中获取不到,因为配置文件是在构建时被读取!!!)
  • 而 loadEnv 则是在构建时加载环境变量,适用于打包时(构建时)需要引用环境变量的场合。
  • 环境变量的值必须以 VITE_ 开头
  • 与上面提到的一样,Vite 要求所有的环境变量必须以 VITE_ 开头。如果你想要使用 import.meta.env 或者 loadEnv 获取环境变量的值,需要遵循这个规则。
  • 也可以获取非VITE_开头的变量,但是要修改配置文件中prefixes配置,不推荐这样做
    在这里插入图片描述

loadEnv函数可以通过改变第三个参数获取到非VITE_前缀的变量。

Vite-loadEnv官网文档

  • 23
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

怂怂敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值