vue3.0项目小白填坑之vue3.0+vite获取环境变量
更新时间：2024年03月18日 09:07:06 作者：半夏ing
Vue3项目使用vite作为打包工具时,环境变量可以保存在.env文件中,在build时进行解析,这篇文章主要给大家介绍了关于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] 是无效的
附：vue3判断当前的环境变量, 获取环境变量中的值
1.判断当前是开发环境还是生产环境：
if(import.meta.env.DEV) // 是否为开发环境 if(import.meta.env.PROD) // 是否为生产环境
2.环境配置变量中的值：
比如.env.production环境变量中有：NAME='XXXX'
访问这个NAME则可以：
import.meta.env.NAME
总结
到此这篇关于vue3.0项目小白填坑之vue3.0+vite获取环境变量的文章就介绍到这了,更多相关vue3.0 vite获取环境变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
无论单页还是多页，我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由，渲染相应的404页面。这篇文章主要介绍了Vue单页及多页应用全局配置404页面实践,需要的朋友可以参考下2018-05-05
利用vue.js把静态json绑定bootstrap的table方法
今天小编就为大家分享一篇利用vue.js把静态json绑定bootstrap的table方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要给大家介绍了关于treeSelect树组件设置父节点禁用的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-12-12
下面小编就为大家分享一篇vue之浏览器存储方法封装实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Intellij IDEA搭建vue-cli项目的方法步骤,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
今天小编就为大家分享一篇vue transition 在子组件中失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本篇文章主要介绍了vue 2.0 购物车小球抛物线的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue 计数器的实现，主要利用HTML实现步骤现在页面上简单实现一个计数器，内容简单且详细,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了vue项目使用微信公众号支付总结，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
Carousel（走马灯）是一种常见的前端组件,通常用于展示多个项目（通常是图片或内容块）的轮播效果,这篇文章主要介绍了vue3项目中的el-carousel 轮播图的使用,需要的朋友可以参考下2024-02-02
最新评论