位置: IT常识 - 正文

【vite·5】vite中环境变量的使用与配置(全网最全)(vite中文网)

编辑:rootadmin
【vite·5】vite中环境变量的使用与配置(全网最全) 什么是环境变量

推荐整理分享【vite·5】vite中环境变量的使用与配置(全网最全)(vite中文网),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vite svelte,vite cli,vite中文网,vitec,vite cli,vite中文,vitec,vitejte,内容如对您有帮助,希望把文章链接给更多的朋友!

 根据当前的代码环境变化的变量就叫做环境变量。比如,在生产环境和开发环境将BASE_URL设置成不同的值,用来请求不同的环境的接口。

环境变量一般可以在全局访问到。在webapck中,我们也许看到过这样的代码

// webpack.config.jsmodule.exports = { mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'}

 process.env.NODE_ENV就是一个环境变量。

process.env是Nodejs提供的一个API,其返回一个对象,包含了当前Shell的所有环境变量。比如,process.env.HOME返回用户的主目录。 webpack环境配置之process.env:https://www.yuque.com/persagy/mkk933/qycy0evite中如何使用环境变量 环境变量与process.env

使用环境变量,是基于不同环境实现不同逻辑的。比如,在生产环境和开发环境将BASE_URL设置成不同的值,用来请求不同的环境的接口。

但要注意,这里环境变量的识别,是浏览器端进行的,由浏览器根据不同环境变量进行不同逻辑!

vue2中,webpack帮我们做了处理,使浏览器可以直接识别node的process.env变量,从而实现了浏览器识别环境变量的功能。

vite中,我们的代码运行在浏览器环境中,因此是无法识别process.env变量的。(这意味着,vite中识别环境变量的方式与webpack中不同)vite.config.js运行在node环境中,因此,可以识别process.env变量

看下面的例子: 我们在main.js中打印process.env,浏览器不认识process.env,会报错

console.log(' process.env: ', process.env);

vite.config.js运行在node环境中,可以打印出process.env

那么,vite中如何识别环境变量呢?

vite中的环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量:

import.meta.env.MODE: {string} 应用运行的模式。import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base配置项决定。import.meta.env.PROD: {boolean} 应用是否运行在生产环境。import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

我们在main.js中打印一下看看

console.log(' import.meta.env.MODE: ', import.meta.env.MODE);console.log(' import.meta.env.BASE_URL: ', import.meta.env.BASE_URL);console.log(' import.meta.env.PROD: ', import.meta.env.PROD);console.log(' import.meta.env.DEV: ', import.meta.env.DEV);console.log(' import.meta.env.SSR: ', import.meta.env.SSR);

注:这些变量在运行在环境中,vite.config.js中无法访问

那么,我们如何自定义一些环境变量呢?

vite中自定义环境变量

Vite内置了dotenv这个第三方库, dotenv会自动读取.env文件, dotenv 从你的 环境目录 中的下列文件加载额外的环境变量:

.env                     # 所有情况下都会加载.env.[mode]         # 只在指定模式下加载 

默认情况下

npm run dev 会加载 .env 和 .env.development 内的配置npm run build 会加载 .env 和 .env.production 内的配置mode 可以通过命令行 --mode 选项来重写。

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

我们验证下:

我们在项目的根目录下,创建.env文件,写入测试内容;

HELLO = "小伙子,我是base数据"VITE_HELLO = "小伙子,我是base数据"

创建 .env.development 文件,写入测试内容;

HI = "小伙子,我是development数据"VITE_HI = "小伙子,我是development数据"

 创建 .env.production 文件,写入测试内容;

MD = "小伙子,我是production数据"VITE_MD = "小伙子,我是production数据"

然后再main.js中打印一下

console.log(' HI: ', import.meta.env.HI);console.log(' VITE_HI: ', import.meta.env.VITE_HI);console.log(' HELLO: ', import.meta.env.HELLO);console.log(' VITE_HELLO: ', import.meta.env.VITE_HELLO);console.log(' MD: ', import.meta.env.MD);console.log(' VITE_MD: ', import.meta.env.VITE_MD);

运行 npm run dev 命令,,观察浏览器打印结果

【vite·5】vite中环境变量的使用与配置(全网最全)(vite中文网)

由于我们执行的是run dev,mode属于development,因此.env和 .env.development中以VITE_ 为前缀的变量都会被识别。

vite环境变量配置进阶加载自定义的.env文件

基于vite的设计模式,项目中默认可以加载开发模式(development)和生产模式(production)对应的.env文件。

假如,我们自定义一个test环境,想加载.env.test内的环境变量,要怎么做吗?

1.显示的指定mode 模式

参考vite 的mode共享配置 | Vite 官方中文文档

为了方便,我们直接在package.json中配置命令 "test": "vite --mode test",

"scripts": { "test": "vite --mode test", "dev": "vite", "build": "vite build" },

2.根目录创建.env.test文件

VITE_HI = "1111111111111111111111111111111111"

main.js中打印这个环境变量    console.log(' VITE_HI: ',  import.meta.env.VITE_HI);

运行  npm run test 命令 ,然后观察浏览器控制台结果。

可以看见,此时,我们自定义test环境下的环境变量被打印了。

更改.env的默认地址

我们现在的.env文件都是建立在根目录的,如果.env.XX的文件太多,会显得我们的项目目录很乱,我们能将.env放在一个统一的文件夹内吗?

可以通过envDir配置来改变!参考:共享配置 | Vite 官方中文文档

envDir用于加载 .env 文件的目录。可以是一个绝对路径,也可以是相对于项目根的路径。

类型: string默认: root

比如,我们在vite.config.js中这样配置

import { defineConfig } from "vite";export default defineConfig( { envDir:"env"});

然后,所有的.env.xxx文件就可以放在项目根目录的env文件夹下了。

更改环境变量的VITE_前缀

如果你觉得VITE_前缀不够骚,想更换这个前缀,改怎么做呢?

使用envPrefix配置来改变!参考:共享配置 | Vite 官方中文文档

以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。

类型: string | string[]默认: VITE_

安全注意事项

envPrefix 不应被设置为空字符串 ' ',这将暴露你所有的环境变量,导致敏感信息的意外泄漏。 检测到配置为 ' ' 时 Vite 将会抛出错误.

vite加载环境变量的特殊处理

node环境中具有process.env这个全局变量。基于dotenv的加载原理,.env内设置的环境变量在vite.config.js中理论上是可以打印出来的。

我们在项目中建立个.env文件,配置好环境变量,试试

HELLO = "小伙子,你很行啊"

我们在vite.config.js中进行打印。

import { defineConfig } from "vite";export default defineConfig(({ command, mode, ssrBuild }) => { console.log("process.env: ", process.env.HELLO); return { //....一些vite配置 };});

奇怪的是,process.env.HELLO并没有被打印(注意:现在是node环境),这是为什么?

通过前几节的示例,我们可以知道,envDir 选项会影响加载.env文件的位置,因此,Vite 默认是不加载 .env 文件的,因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个。

vite加载环境变量源码

参考:源码学习:Vite中加载环境变量(loadEnv)的实现-阿里云开发者社区

本文链接地址:https://www.jiuchutong.com/zhishi/289071.html 转载请保留说明!

上一篇:在海洋里畅游的座头鲸和海豚,美国夏威夷州 (© drewsulockcreations/Getty Images)(在海洋里游泳)

下一篇:nvm安装步骤及使用方法(nvm使用教程)

  • 开加一笔是什么(开加一笔是什么字一年级)

    开加一笔是什么(开加一笔是什么字一年级)

  • 联通固定电话呼叫转移怎么设置(联通固定电话呼叫转移怎么设置和取消)

    联通固定电话呼叫转移怎么设置(联通固定电话呼叫转移怎么设置和取消)

  • 微信怎么自动退出了登录(微信怎么自动退群)

    微信怎么自动退出了登录(微信怎么自动退群)

  • 抖音听歌识曲(抖音听歌识曲功能在哪)

    抖音听歌识曲(抖音听歌识曲功能在哪)

  • 快手申请退款商家不理怎么办(快手退款商家同意多久到账)

    快手申请退款商家不理怎么办(快手退款商家同意多久到账)

  • 华为手机流量用不了是怎么回事(华为手机流量用多少从哪里能看到)

    华为手机流量用不了是怎么回事(华为手机流量用多少从哪里能看到)

  • 魅族手机移动数据自动打开(魅族手机移动数据标志变灰色)

    魅族手机移动数据自动打开(魅族手机移动数据标志变灰色)

  • 苹果手机型号开头字母代表什么(苹果手机型号开头)

    苹果手机型号开头字母代表什么(苹果手机型号开头)

  • 华为mate40什么时候上市的(华为mate40好久出)

    华为mate40什么时候上市的(华为mate40好久出)

  • 电话充值卡哪里去买(电话充值卡哪里去卖)

    电话充值卡哪里去买(电话充值卡哪里去卖)

  • 钉钉直播退出去再进去算时间吗(钉钉直播退出去老师知道吗)

    钉钉直播退出去再进去算时间吗(钉钉直播退出去老师知道吗)

  • win10 ltsc是什么版本(win10 ltsc优缺点)

    win10 ltsc是什么版本(win10 ltsc优缺点)

  • 苹果nfc感应区坏了(iphone nfc感应区)

    苹果nfc感应区坏了(iphone nfc感应区)

  • 免打扰模式电话打的进去吗(免打扰模式电话能打进来吗)

    免打扰模式电话打的进去吗(免打扰模式电话能打进来吗)

  • 苹果系统降级后数据还在吗(苹果系统降级后app还在吗)

    苹果系统降级后数据还在吗(苹果系统降级后app还在吗)

  • ipad所有型号上市顺序(ipad所有型号上市顺序pro)

    ipad所有型号上市顺序(ipad所有型号上市顺序pro)

  • word上下标一起怎么打(word2007上下标)

    word上下标一起怎么打(word2007上下标)

  • 华为手机风控设置在哪(华为 风控)

    华为手机风控设置在哪(华为 风控)

  • 乐视手机没声音怎么办(乐视手机音量小怎么办)

    乐视手机没声音怎么办(乐视手机音量小怎么办)

  • 苹果手机云盘相册在哪(苹果手机相册云盘)

    苹果手机云盘相册在哪(苹果手机相册云盘)

  • 微信小号和大号的区别(微信小号和大号会共享信息吗)

    微信小号和大号的区别(微信小号和大号会共享信息吗)

  • scanpay是什么意思(scanpay-sla)

    scanpay是什么意思(scanpay-sla)

  • qq聊天小耳朵是什么(qq聊天的小耳朵)

    qq聊天小耳朵是什么(qq聊天的小耳朵)

  • 苹果二代笔怎么连接(苹果二代笔怎么开机)

    苹果二代笔怎么连接(苹果二代笔怎么开机)

  • 小米8如何开启快充(小米8如何开启root权限)

    小米8如何开启快充(小米8如何开启root权限)

  • m1803e1a是小米几(m1804e4a是小米几)

    m1803e1a是小米几(m1804e4a是小米几)

  • 葡萄酒app开发有哪些功能(葡萄酒网站好的有哪些)

    葡萄酒app开发有哪些功能(葡萄酒网站好的有哪些)

  • 树干上的扁嘴山巨嘴鸟,厄瓜多尔 (© Tui De Roy/Minden Pictures)(真菌感染手指甲空了)

    树干上的扁嘴山巨嘴鸟,厄瓜多尔 (© Tui De Roy/Minden Pictures)(真菌感染手指甲空了)

  • 缴纳印花税的会计凭证
  • 个人免征税额
  • 非营利组织免税收入
  • 什么叫做供应链公司
  • 当月销售次月开票怎么申报
  • 以前未入账固定资产补入账涉及的房产税
  • 费用性税金计入什么科目
  • 应交税费明细表填制
  • 增值税进项抵扣怎么做账
  • 可变现净值与公允价值孰低
  • 材料成本差异借贷方向
  • 交易性金融资产的交易费用计入哪里
  • 作为一个财务 月末要做什么
  • 资产减值损失转回的账务处理
  • 少记财务费用如何记账
  • 法院受理费用
  • 知识产权服务项目
  • 办公室的取暖费怎么做会计分录
  • 佣金可以直接转到个人账户吗
  • 股权转让受让人违约
  • 收到投资分红要缴纳企业所得税吗?
  • 红字发票可用于入账吗
  • 出口退税注销备注怎么填
  • 所得减免优惠明细表减免项目包括几项
  • 金融合同违约金罚息
  • 收款收据可以做账么
  • 暂估收入销项税与后期开票不一致
  • 劳务外包开票税目由所提供的服务性质来决定
  • 旅游开发企业会计账务处理
  • avcodec是什么意思
  • 进程控制块PCB不包括( )
  • php中file
  • 保险业营改增
  • 收到捐赠的设备一台
  • win7系统文件在哪
  • Element-UI--<el-switch>的@change回调函数的参数用法
  • php获取访问用户的ip
  • 来料加工的账务处理
  • 小规模纳税人工商年报网上怎么报
  • 一般纳税人销售旧货适用征收率是?
  • php防止抓包
  • mnist数据集下载码
  • axios请求数据的数据类型
  • tune a video:one-shot tuning of image diffusion models for text-to-video generation
  • 图像的傅里叶变换和离散余弦变换实验报告
  • 以前年度盈余调整对应科目
  • 认缴资本怎么填
  • 普票是啥意思
  • 破产清算应收账款怎么评估
  • 企业运费如何开票
  • 公司注销后退资需要交税吗
  • 收到对方公司退款
  • pe市盈率法
  • 增值税递延纳税
  • 工会筹备金该按什么计算
  • 增值税销项抵扣报税后有效期是多长时间
  • 摊销本月的广告费合理吗
  • 主营业务成本与其他业务成本的区别
  • 医疗器械行业进货未取得发票怎么做会计分录的
  • 日记账的建立
  • 商业企业注销应检查哪方面的问题
  • centos7.9命令
  • sql语句版本
  • mac怎么用win系统
  • 利用内置管理工具的方法
  • ubuntu20.04怎么样
  • 进程lsass.exe
  • usrmlnka.exe - usrmlnka进程是什么意思
  • vc运行程序exe停止工作怎么办
  • find linux命令详解
  • XP系统怎么安装打印机
  • [下载转存] 经验本题库源文件下载转存 秒结
  • softmangerlite.exe是什么进程 有什么用
  • linux设置权限755
  • win7系统开机后很卡什么原因
  • ms-dos7.10如何安装
  • nodejs body-parser 解析post数据实例
  • acrag
  • domcer下载
  • js给input添加属性
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设