vue3.0项目小白填坑之vue3.0+vite获取环境变量

更新时间：2024年03月18日 09:07:06 作者：半夏ing

Vue3项目使用vite作为打包工具时,环境变量可以保存在.env文件中,在build时进行解析,这篇文章主要给大家介绍了关于vue3.0项目小白填坑之vue3.0+vite获取环境变量的相关资料,需要的朋友可以参考下

1、vite.config.ts文件里面

import { loadEnv } from 'vite'

export default ({mode}) => {
      // 这里的env的值就是获取到的当前运行环境的env文件对象，env的值是一个集合 ，访问某个属性 直接env.XXX读取即可
    const env = loadEnv(mode , process.cwd())

}

需要注意的是，为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这个文件中

// .env.development 文件中
USER_PASSWORD = foobar // 没有以 `VITE_` 为前缀 不会暴露出去
VITE_APP_BASE_PATH = 123 // 可以暴露出去

2、页面上获取

<script setup>
  // 直接使用import.meta.env去读取环境变量文件里面的某个属性
  const XXX = import.meta.env.VITE_SOME_KEY
</script>

在生产环境中，环境变量会在构建时被静态替换，因此，在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。例如，动态 key 取值 import.meta.env[key] 是无效的

附：vue3判断当前的环境变量, 获取环境变量中的值

1.判断当前是开发环境还是生产环境：

if(import.meta.env.DEV) // 是否为开发环境

if(import.meta.env.PROD) // 是否为生产环境

2.环境配置变量中的值：

比如.env.production环境变量中有：NAME='XXXX'

访问这个NAME则可以：

import.meta.env.NAME

总结

到此这篇关于vue3.0项目小白填坑之vue3.0+vite获取环境变量的文章就介绍到这了,更多相关vue3.0 vite获取环境变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3数据更新,页面没有同步更新的问题及解决
这篇文章主要介绍了Vue3数据更新,页面没有同步更新的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
VUE项目中加载已保存的笔记实例方法
在本篇文章里小编给大家整理了一篇关于VUE项目中加载已保存的笔记实例方法，有兴趣的读者们可以参考下。
2019-09-09
vue中根据判断条件添加一个或多个style及class的写法小结
这篇文章主要介绍了vue中根据判断条件添加一个或多个style及class的写法,文中给大家补充介绍了关于vue里:class的使用结合自己的实现给大家讲解，需要的朋友可以参考下
2023-03-03
Vue项目中如何封装axios（统一管理http请求）
这篇文章主要给大家介绍了关于Vue项目中如何封装axios（统一管理http请求）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
vue脚手架安装出错的问题及解决过程
文章介绍了在使用Vue脚手架安装过程中遇到错误的解决方法,包括卸载并重新安装Node.js、使用cnpm安装Vue CLI、配置全局缓存路径以及设置环境变量等步骤
2026-03-03
Vue中插槽slot的使用示例详解
这篇文章主要介绍了Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2025-05-05
vue中使用@blur获取input val值
这篇文章主要介绍了vue中使用@blur获取input val值的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue中this.$nextTick的作用及用法
在本文章里小编给大家整理了关于Vue中this.$nextTick的作用及用法，有需要的朋友们可以跟着学习参考下。
2020-02-02
详解关于Vue版本不匹配问题(Vue packages version mismatch)
这篇文章主要介绍了详解关于Vue版本不匹配问题(Vue packages version mismatch)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
Vue3+Vite+TS使用elementPlus时踩的坑及解决
这篇文章主要介绍了Vue3+Vite+TS使用elementPlus时踩的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10