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