vue3.0项目小白填坑之vue3.0+vite获取环境变量
作者：半夏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获取环境变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！