当前位置:首页 » 《我的小黑屋》 » 正文

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

8 人参与  2024年04月07日 15:55  分类 : 《我的小黑屋》  评论

点击全文阅读


浅浅记录一下,毕竟好记性不如烂笔头?

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] 是无效的


点击全文阅读


本文链接:http://zhangshiyu.com/post/91832.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1