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获取所有环境变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Element-ui DatePicker显示周数的方法示例
这篇文章主要介绍了Element-ui DatePicker显示周数的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
使用 vue.js 构建大型单页应用
本文给大家详细介绍了如何使用使用 vue.js脚手架工具vue-cli构建大型单页应用的方法，非常的实用，有需要的小伙伴可以参考下
2018-02-02
Vue + Element UI 实现权限管理系统之菜单功能实现代码
菜单管理是一个对菜单树结构的增删改查操作，这篇文章主要介绍了Vue + Element UI 实现权限管理系统之菜单功能实现代码,需要的朋友可以参考下
2022-02-02
vue中mock数据,模拟后台接口实例
这篇文章主要介绍了vue中mock数据,模拟后台接口实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue中Mustache插值语法与v-bind指令详解
在Vue中通过Mustache语法（双大括号）将data中的文本数据插入到HTML中,下面这篇文章主要给大家介绍了关于Vue中Mustache插值语法与v-bind指令的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
解决vue打包后刷新页面报错：Unexpected token <
这篇文章主要介绍了解决vue打包后刷新页面报错：Unexpected token <相关知识点，需要的朋友们参考下。
2019-08-08
Vue2.0权限树组件实现代码
本文通过实例代码给大家介绍了Vue2.0权限树组件实现代码，需要的的朋友参考下吧
2017-08-08
Vue打包后静态资源图片失效彻底解决的终极指南
文章详细分析了Vue项目中静态资源路径失效的问题,包括开发、构建、部署等阶段的常见原因,并提供了多种解决方案,旨在帮助开发者系统性地解决静态资源路径问题,构建稳定可靠的前端应用,需要的朋友可以参考下
2025-03-03
VUE脚手架的下载和配置步骤详解
这篇文章主要介绍了VUE脚手架下载和配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue作用域插槽详解、slot、v-slot、slot-scope
这篇文章主要介绍了vue作用域插槽详解、slot、v-slot、slot-scope，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03