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

转载请说明出处内容投诉
CSS教程_站长资源网 » vue3.0项目小白填坑记四:vue3.0+vite获取环境变量

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买