浅浅记录一下,毕竟好记性不如烂笔头?
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] 是无效的