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

这篇具有很好参考价值的文章主要介绍了【vite·5】vite中环境变量的使用与配置(全网最全)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是环境变量

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

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

// webpack.config.js
module.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/qycy0e

vite中如何使用环境变量 

环境变量与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 环境变量,vite,javascript,前端,vue.js,node.js

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

vite 环境变量,vite,javascript,前端,vue.js,node.js

那么,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 环境变量,vite,javascript,前端,vue.js,node.js

注:这些变量在运行在环境中,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 环境变量,vite,javascript,前端,vue.js,node.js

由于我们执行的是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 命令 ,然后观察浏览器控制台结果。

vite 环境变量,vite,javascript,前端,vue.js,node.js

可以看见,此时,我们自定义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环境),这是为什么?

vite 环境变量,vite,javascript,前端,vue.js,node.js

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

vite加载环境变量源码

参考:源码学习:Vite中加载环境变量(loadEnv)的实现-阿里云开发者社区文章来源地址https://www.toymoban.com/news/detail-790522.html

到了这里,关于【vite·5】vite中环境变量的使用与配置(全网最全)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React Native环境配置搭建(全网最全 没有之一)

    小编在配置RN环境的时候,遇到了各种 坎儿,在发布这篇之前终于是搞好了,特此在这把详细过程记录下,以便造福各位。(一键三连点关注,关注小夏不迷路) 准备工作:必须安装的依赖有:Node、JDK 和 Android Studio。 1)node必须在14以上,可以去 node官网下载。 2)个人我推

    2024年02月02日
    浏览(45)
  • vite环境变量配置

    环境变量就是会根据当前的代码环境变化的变量叫做环境变量。 我们在项目中的代码环境大致分为下面几种: 1、开发环境 2、测试环境 3、预发布环境 4、灰度环境 5、生产环境 我们在项目中通常需要区分线上环境和开发环境的后端地址,例如: 我们每次在开发的时候都要区

    2024年02月08日
    浏览(35)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(62)
  • Ubuntu20.04配置深度学习环境(全网最细最全)

    目录 一、NVIDIA显卡驱动安装 二、安装CUDA 三、安装cuDNN 四、安装Anaconda 五、Anaconda的简单使用 5.1 管理环境 5.2 管理包(package) 5.3 conda install 与 pip install 5.4 conda configuration        默认你已经完成Ubuntu20.04的安装,如果没安装的话可以参考其他博客,我的显卡是GTX1660Ti     

    2024年04月09日
    浏览(80)
  • vue3+vite配置环境变量

    新建 .env(所有环境生效).env.development(开发环境配置) .env.production(生产环境配置) 以 VITE_ 为前缀定义变量 修改vite-env.d.ts 使用 loadEnv 读取环境变量 使用npm run dev 启动命令,读取.env 与 .env.development的内容 修改package.json 使用 npm run test启动命令,读取.env 与 .env.test的内容

    2024年02月11日
    浏览(54)
  • Vue3+vite环境变量配置

    在项目开发中,通常来说,不同的环境会有不同的请求api接口,这就需要修改配置,才能满足对应的环境。所以这里就使用了环境变量。环境变量就是在不同的环境中使用不同的变量值。 在项目根目录(和src同级)中创建三个文件: .env.development  .env.staging .env.production 定义

    2024年02月05日
    浏览(91)
  • ②【Maven】从0上手Maven的安装与配置 - 最全教程 (下载 + 配置 + 环境变量 )

    个人简介:Java领域新星创作者;阿里云技术博主、星级博主、专家博主;正在Java学习的路上摸爬滚打,记录学习的过程~ 个人主页:.29.的博客 学习社区:进去逛一逛~ 通过 官方渠道 ,下载Maven压缩包,官网🔗:maven.apache.org … 进入官网后,选择Download(下载)选项,安装最新

    2024年02月04日
    浏览(54)
  • vue3之vite创建h5项目1(创建vite项目、配置IP访问项目、配置多环境变量与预览打包生产效果、配置别名)

    初始化项目模块 添加环境变量文件,每个文件写入配置,定义 env 环境变量前面必须加 VITE_ dev环境 test环境 prod环境 在项目根目录下创建 03-1:配置多环境变量之dev环境 .env.development 03-2:配置多环境变量之test环境 .env.test 03-3:配置多环境变量之prod环境 .env.production 03-4 修改

    2024年02月02日
    浏览(79)
  • 全网最全,基于docker 创建的Minio容器配置Https 访问,不使用第三方服务

    1.需要一个域名ssl证书 阿里云有免费的,可以使用,推荐链接: https://yundunnext.console.aliyun.com/?spm=a2c4g.11186623.0.0.3efc4f2epEe03yp=cas#/overview/cn-hangzhou 2.使用docker的主机模式     --network=host 3.在宿主机上的  /etc/hosts  添加域名映射  127.0.0.1     minio.demo.com 4.将证书配置挂载到mini

    2024年04月13日
    浏览(46)
  • 全网最全最细的PLSQL下载、安装、配置、使用指南、问题解答,相关问题已汇总

    1.1、PLSQL 下载链接 1.2、PLSQL下载链接,包含64位和32位。选择64位下载就好了。 1.3、推荐大家下载14.0.6版本的PLSQL,一般不推荐下载最新的,最新的虽然不一定有bug,但是遇到了就很恶心,但是上一个版本基本上就很稳定了。14.0.6不用下载chinese语言包,就是下图的Chinese Langua

    2024年01月19日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包