一行代码,优化 import.meta.env 使用体验

相信今天推荐的这个插件可以解决很多人 vite 使用过程中遇到过的体验不好的痛点,用过 import.meta.env 的小伙伴应该都有这样的问题。

不想看文字内容的可以直接看 GitHub 插件地址,或选择 哔哩哔哩视频版

正文

举个例子🌰,比如说我们这里通过.env文件在项目中定义了一些环境变量

txt 复制代码
# App 名字
VITE_APP_NAME="My Awesome App"

# App 版本号
VITE_APP_VERSION=1.0.0

# App 接口重试次数
VITE_APP_API_RETRY=3

# 是否开启 App 调试
VITE_APP_DEBUG=true

# App base url
VITE_APP_URL="/app-test"

# App 的 json 配置
VITE_APP_JSON_DATA={"key1":"value1","key2":"value2"}

问题一:不知道当前配置了哪些环境变量

当我想要在项目中通过 import.meta.env 对象访问定义的环境变量,敲下.时,发现没有我们刚刚定义的环境变量,这个时候就不自信了,担心自己写错。有遇到的扣 1

ts 复制代码
import.meta.env.??

问题二:判断值的时候需要写成字符串值比对

我们上面定义了 VITE_APP_DEBUG 来表示是否开启了 App 调试,他是一个 boolean值,但我们并不能直接使用 boolean值,我们需要在代码中这样写。 就很不简洁优雅

ts 复制代码
if(import.meta.env.VITE_APP_DEBUG === 'true') {
  console.log('调试模式开')
} else {
  console.log('调试模式关')
}

启用插件

我们把这个插件启用,然后看下。

ts 复制代码
// vite.config.js / vite.config.ts
import { envParse } from 'vite-plugin-env-parse'

export default {
  plugins: [envParse()]
}

可以看到,代码提示也有了

浏览器中的值输出也变成了本来的值

现在,判断是否开启调试模式就不需要像刚刚那样写了。

ts 复制代码
if(import.meta.env.VITE_APP_DEBUG) {
  console.log('调试模式开')
} else {
  console.log('调试模式关')
}

怎么样,get 到了没。

结尾

安装方式和更多内容参考仓库 README.md

插件地址:github.com/yue1123/vit...

安装方式:npm i vite-plugin-env-parse

相关推荐
中微子4 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102419 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y34 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁41 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry41 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录43 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟43 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui