vite获取所有环境变量(env)的实现方法

更新时间：2024年06月18日 08:55:51 作者：一拖再拖一拖再拖

本文主要介绍了vite获取所有环境变量(env)的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

0.环境变量文件

API_URL=8888888
VITE_API_URL=9999999

1.定义环境变量

默认情况下，vite只获取以VITE_为前缀的环境变量。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

但如果你觉得你是进击的巨人，可以参考如下方案直接获取所有环境变量。

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  // 如果你用的ts，请使用 let define: { [key: string]: string } = {};
  let define = {};
  Object.keys(env).forEach(key => {
    define[`import.meta.env.${key}`] = JSON.stringify(env[key])
  })
  return {
    //.....
    define: {
      ...define
    }
  }
})

mode：测试环境/正式环境/自定义环境
process.cwd()：当前项目根目录
“” ：加载所有环境变量

同理，既然可以暴露全部，你也可以拆分部分环境变量暴露：

define: {
  "import.meta.env.API_URL":define["import.meta.env.API_URL"]
}

2.读取环境变量

vite客户端获取变量的方法和其他构建工具有一定差异，使用 import.meta.env.XX获取。

console.log(import.meta.env)

到此这篇关于vite获取所有环境变量(env)的实现方法的文章就介绍到这了,更多相关vite获取所有环境变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue实现图书管理demo详解
这篇文章主要介绍了vue实现图书管理，分享了图书管理demo用的知识点，以及遇到问题的总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
vue项目调试的三种方法总结
这篇文章主要给大家总结介绍了关于vue项目调试的三种方法,大家可以根据需要选择调试方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-09-09
修改vue源码实现动态路由缓存的方法
这篇文章主要介绍了修改vue源码实现动态路由缓存的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
el-select 数据回显,只显示value不显示lable问题
这篇文章主要介绍了el-select 数据回显,只显示value不显示lable问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue element el-form 多级嵌套验证的实现示例
本文主要介绍了vue element el-form 多级嵌套验证的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue路由划分模块并自动引入方式
这篇文章主要介绍了vue路由划分模块并自动引入方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
使用konva和vue-konva库实现拖拽滑块验证功能
这篇文章主要介绍了使用konva和vue-konva完成前端拖拽滑块验证功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
Vue响应式原理的示例详解
Vue 最独特的特性之一，是非侵入式的响应系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。本文将通过示例详解Vue的响应式原理，感兴趣的可以了解一下
2022-03-03
vue实现监听数值的变化，并捕捉到
这篇文章主要介绍了vue实现监听数值的变化，并捕捉到问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
uniapp定义new plus.nativeObj.View实现APP端全局弹窗功能
文章介绍了在UniApp中使用`newplus.nativeObj.View`实现弹窗的原因和方法,它定义了一个`AppPopupView`弹窗函数,并在`main.js`中挂载到全局页面,以便在任何地方调用,感兴趣的朋友跟随小编一起看看吧
2024-11-11