vue3.0项目小白填坑记四:vue3.0+vite获取环境变量
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] 是无效的
更多推荐
已为社区贡献21条内容
所有评论(0)