VITE+VUE3无法获取环境变量问题

最新推荐文章于 2024-07-05 02:47:57 发布
最新推荐文章于 2024-07-05 02:47:57 发布
阅读量5k 收藏 1
点赞数 1
分类专栏： # vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lou_Lan/article/details/126998571
版权

概述

  使用vue cli创建的vue项目我们获取环境变量的方式如下（在根目录下配置环境配置文件之后）：

process.env.NODE_ENV

  这是我们通常获取环境变量的方式，但是今天在使用vite+vue3的时候却无法获取环境变量。怎么回事呢？

原因解决

  后来查看了VITE官网才知道，使用vite+vue的时候环境变量的获取方式变成如下:

import.meta.env

而且必须要以”VITE_“开头的变量才能被识别读取。

注：更多的使用方式请看官网VITE

Lou_Lan
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.0项目小白填坑记四：vue3.0+vite获取环境变量
Fiona_lms的博客
04-11 3221
vue3.0+vite获取环境变量
vue3 + vite踩坑记之—— 无法读取全局变量，如何配置全局变量
Pandas_Lin的博客
06-28 624
vite默认对外暴露出的变量只能是以VITE开头，所以只能定义VITE_API之类的，像TEST_API这样就是暴露不出去的，所以我们要在vite.config.js中配置可以自定义的前缀。然后，就可以访问到啦。
vue3项目环境变量.env文件配置
最新发布
weixin_36366711的博客
07-05 1730
一、环境变量配置 官网https://cn.vitejs.dev/guide/env-and-mode.html#intellisense 1. 新建.env开头的文件在根目录 为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码 .env 所有环境默认加载 ....
vue3 + vite 环境变量踩坑
Nikon_的博客
07-18 2175
众所周知，项目搭建过程中，存在环境的区分。一般项目中都会存在env的俩个配置环境变量的配置文件。例如以下生产环境、开发环境的环境变量文件：//.env.development 生产环境变量文件# 开发环境配置​# 开发环境​# 生产环境配置​# 生产环境​然后在package.json中配置对应环境启动命令用以启动不同环境},根据代码运行环境变化而变化的变量就是所谓的环境变量。在生产环境和开发环境中最多用以区分接口公共路径来请求不同接口。环境变量一般在全局可以访问得到。
vue3环境变量
nullzzzz的博客
01-12 959
vue3配置环境变量必须加上 VUE_APP_ 前缀，否则识别不到。 例如：VUE_APP_XXX
VUE-CLI 3项目读取环境变量
u013293432的博客
03-31 1255
读取环境变量，发现值为undefine，因为很少去读取环境变量，上次解决该问题后，时间也隔了很久，这次有在这个问题上卡了很久，所以做个记录 vue-cli 3项目的环境变量必须以VUE-APP或者VUE开头才能被读取到，否者读取到的值为undefine VUE_APP_XXX_XXX = '' ...
【vue3】-解决build打包之后，无法获取import.meta.env环境变量的问题
string佳佳的博客
01-12 2166
vite-vue3-项目通过-importmetaenv-获取自定义的变量
vue3+vite在vite.config.ts中使用环境变量process.env.xxx获取变量为undefined
fllfllfll的博客
05-18 465
使用vite自带的loadEnv函数可以直接获取变量。
vue 3 第三十六章：vite环境变量（.env文件的配置及使用）
to_the_Future的博客
06-11 2万+
通过使用.env文件，我们可以轻松管理不同环境下的配置。在Vite的应用程序中，可以使用import.meta.env对象来访问环境变量，并根据不同的环境使用不同的配置。这样可以使我们的应用程序更加灵活和易于维护。
Vite环境变量不生效
drunk2的博客
05-23 3401
VITE创建项目后就有了.env.development文件了，开发环境运行时默认使用该文件，但是在项目中就是读不出值undefined，只能读出默认项。我有空也会再研究研究，这个坑踩了我很久了)搞到这一步的应该都清楚环境变量的配置了，就不多阐述了。默认只识别VITE开头的变量应该也不用多说。
vue3+ts遇到的小问题
work33的博客
09-25 8587
解决：1. 检查是或否是，是的话进入拓展设置，所有的选项都勾选2. 还是不行就要更新vscoe了。一般的话会在力捕抓到一个错误。跟新就好了。
vue中 process.env.XXX环境变量不生效（获取不到数据）
zlfjavahome的专栏
06-20 7118
vue中 process.env.XXX环境变量不生效（获取不到数据）
前端环境变量及vite中本地环境配置实践
lizhen_software的博客
12-04 9549
大家经常会看到这种代码，其中cross-env NODE_ENV=production，指定的环境变量key为NODE_ENV，值为production，这样引用之后呢，我们可以通过process.env.NODE_ENV 获取对应的环境变量。process 是node 的一个进程环境，其中通过process.env可以获取进程环境中的环境变量，方便node在调用时处理各种环境信息。这种是最基本的环境变量配置方式，NODE_ENV基本上常用的只有两种，development和production,用来做开
vue3 process.env.XXX环境变量不生效
黎小小的博客
11-16 7304
使用process.env.XXX时获取不到环境变量的值 一：项目根目录下的.env.development和.env.production环境配置文件中，NODE_ENV=二：.env.development和.env.production环境配置文件中变量名必须以VUE_APP_开头。的值必须和package.json文件启动配置--mode一致。
import.meta.env.XXX代表的意思
weixin_45856221的博客
12-06 801
import.meta.env.XXX代表的意思
vite环境变量的坑
weixin_63443072的博客
01-05 646
这个bug来着一个环境变量，这个变量用来配置是否默认启动浏览器。但是吧，我在读取的时候这个 true 是string类型的。然后我转成这个boolean类型，bug就消失了。所以大家在环境变量的时候，该是什么类型还是转一下。不然就会在你意想不到的地方出现bug。是不是发现bug了。你们绝对想不到这个bug是什么。最近在写项目的时候，遇到这么一个bug。然后默认自动打开浏览器。
vite添加环境变量import.meta.env
热门推荐
qq_43592064的博客
01-25 2万+
在不同的文件里面配置不同的环境变量，可以让我们的配置更加容易维护和使用，这里我们说下vite配置环境变量和模式是怎么配置的。 Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，官网上的东西咱这里就不抄了，O(∩_∩)O哈哈~ 我们这里直接说怎么做的，毕竟官网上没有实际使用的例子，在下在实际使用的时候还遇到点问题，当然也可以说是自己没用对吧。 package.json里面的scripts修改，增加多个环境模式，如： "scripts": { "dev": "vite s
自定义环境变量获取不到的解决办法！
JavaBuilt的博客
05-04 5317
自定义环境变量获取不到的解决办法！    开发应用程序时，应该配有环境变量，使程序更加灵活。问题：    类似于JAVA_HOME，自己定义了一个MYHOME，然后用System.getenv("MYHOME");却获取不到，百思不得姐！ 然后，有一天我试了试，又可以了。有毒？？ 仔细想了一下，原因是 配置了之后未重启电脑，导致读取不到。解决办法：    重启电脑...
vite配置环境变量与模式
Smile_ping的博客
05-06 9551
vite配置环境变量与模式 文章目录vite配置环境变量与模式环境变量设置.env.development.env.production读取环境变量 环境变量与模式 环境变量设置 注意： 命名规范 ``VITE_为前缀的变量才会暴露给经过vite`处理的代码 vite serve 时是development开发模式， vite build时是production生产模式。 分别创建配置文件： .env.development 、.env.production .env.development # .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值