Vite - 配置 - 环境变量的配置详解

news2024/11/13 8:43:16

什么是环境变量

会根据当前的代码环境 产生值的变换的变量 就叫做 环境变量。

简单来说,一个名为 APP_NAME 的变量,
在开发环境下,我们希望它的值是 ”测试的名称“;
在正式环境下,我们希望它的值是 ”正式的名称“。

这个变量我们通过配置文件的方式,使它在运行时自动读取不同的值,而代码中可以正常的使用该变量,不需要做修改。

补充知识1 : process 是什么

process 是node的关于当前进程的一个对象。

这个process对象在存储和读取环境变量的时候就会用到这个属性。

补充知识2 : process.cwd()是什么

process.cwd() 是 当前 node  执行的工作目录。

比如 :
  运行项目时 是在  【D:\xxx\study-vite】 下执行的 "npm run dev" 命令,
  那么 process.cwd() 的返回值就是  【D:\xxx\study-vite】

当我们在读取环境变量的配置文件的时候会用到这个。

vite 中的环境变量的处理思路(了解)

vite 使用了 dotenv 这个第三方的库,对环境变量进行处理。
dotenv 会自动读取 【.env】这个文件,并解析这个文件中对应的环境变量,将其注入到process对象下;
但是,vite考虑到和其他配置的冲突问题,它不会直接注入到process对象下。

看上去这两句话是互相矛盾的,一个能注入到process下,一个又不会注入进去,那么如何理解上面两句话呢?
这个就涉及到了vite.config.js的一些配置:
1、【envDir】 :  用来配置当前环境变量的文件地址,默认是 .env 文件,但是可以通过 envDir 这个配置进行修改配置文件的目录。
                    1.代码会读取环境变量
                    2.但是,由于我们的环境配置文件的加载是在最后的,所以极有可能会将 envDir 进行修改,此时,后面的环境变量就会有可能将前面的覆盖掉,这样第一步读取的环境变量就无效了。
【关于vite.config.js相关的内容,可以参考这篇文章 :https://blog.csdn.net/qq_39505245/article/details/134332060】
【此处看上去有些晦涩难懂,如果阅读起来有些难,可以跳过,对实际操作并没有影响,只是为了介绍一些配置的简单过程】

2、vite 针对【1】中的环境变量会被覆盖的问题,给出了解决方案 : 
   使用 vite 的 loadEnv 来手动确认 .env 文件。
   通过这种直接指定的方式,就避免了变量覆盖的问题。

通过以上两个步骤的解读,就形成了以下结论 :
 环境变量仍然会注入到 process 对象中,但是需要使用 vite提供的 loadEnv 这个工具来明确读取环境变量。
 这样就很好的解决了这两句话的矛盾。

环境变量的配置文件命名

.env : 所有环境都用到的环境变量
.env.development : 开发环境用到的环境变量
(默认情况下,vite将我们的开发环境取名为development)
.env.production : 生产环境用到的环境变量
(默认情况下,vite将我们的生产环境取名为production)

vite.config.js 中的 mode 的理解

在 vite.config.js 中 有一个参数是 mode,这个参数 就是指定要使用的环境变量的配置文件,默认值是 development

import { defineConfig } from "vite"
export default defineConfig(({command,mode})=>{
 console.log("mode : ",mode)
 })

问 : 这个mode 的值是什么呢?它是怎么来的呢?
答: mode 的值是 根据执行命令的脚本来的。
package.json 中的脚本配置如下:

"scripts": {
    "dev1": "vite",
    "dev2": "vite --mode development",
    "prod1": "vite build",
    "prod1": "vite build --mode production",
    "test":"vite --mode test"
 },

运行时 :
npm run dev1 ----> vite
npm run dev2 —> vite --mode development
这两个是一样的,因为vite 默认的参数就是 --mode development
同理,对于prod1 和prod2 是一样的

【vite.config.js 中的mode 的值 就来自于 执行时命令 --mode 后面的参数】

vite中读取环境变量的过程

核心 : const env = loadEnv(mode,process.cwd(),"xxx")
过程:
1、读取.env 中的变量,因为这个是全局的嘛,首先读这个;
2、根据mode的值,进行环境配置文件的名称拼接,
    拼接规则是 :.env.+mode的值,
    例如1 :mode的值是 development ,则文件名为 【.env.development】
    例如2 :mode的值是 test,则文件名为 【.env.test】
3、将第二个参数【process.cwd()】和完整的环境配置文件的名称进行拼接,去读取环境变量配置文件;
4、如果第一步和第三步两个配置文件有相同的key,则第三步的会覆盖第一步的环境变量的值,即后面的会覆盖前面的。

环境变量的命名规则

这一条很关键!这一条很关键!这一条很关键!

环境变量的配置文件的key,推荐用【全大写字母+下划线】的命名规则。
环境变量的配置文件的key,推荐用【全大写字母+下划线】的命名规则。
环境变量的配置文件的key,推荐用【全大写字母+下划线】的命名规则。

环境变量的使用过程

vite会将环境变量注入到 import.meta.env 这个对象中去;

但是,vite 在考虑到安全性时,为了防止开发者将隐私性的环境变量直接注入到 import.meta.env 中去,做了一层拦截 : 
如果你的环境变量不是以 VITE 开头的,则不会被注入;
因此,在编写环境变量的时候,需要以 VITE为前缀!!!

但是,如果你想修改这个前缀,可以使用 envPrefix配置进行修改,这个属性是在vite.config.js环境文件中进行配置。
但是一般不推荐修改。
修改方式如下:
import { defineConfig } from "vite"
export default defineConfig({
    envPrefix:"TEST"
})

补充一个小知识(了解):

为什么vite.config.js 可以书写esmodule 的形式
这是因为vite在读取vite.config.js的时候会率先用node去解析文件语法
如果发现你是esmodule规范,会直接将你的esmodule规范进行替换,换成commonjs规范

环境变量的使用案例

本案例是对上面的理论知识的一个实践。

项目目录结构

study-vite
  | -- environment  # 环境的配置文件
      | -- vite.base.config.js # 基础公用的环境配置
      | -- vite.dev.config.js # 开发环境配置
      | -- vite.prod.config.js # 生产环境配置
  | -- node_modules # 项目依赖的目录
  | -- .env # 基础公用的环境变量
  | -- .env.development # 开发环境的环境变量
  | -- .env.production # 生产环境的环境变量
  | -- index.html # 主页面
  | -- main.js # 主要的js
  | -- package.json  # 不解释
  | -- vite.config.js # vite 的主配置,会加载 environment 目录下的不同配置文件

环境变量的配置文件

.env

# 定义一个全局的变量,无论是哪个环境下都可以使用
VITE_A = 全局的一个变量

.env.development

# 开发环境下使用的变量
VITE_APPNAME = 测试的应用名称

.env.production

# 生产环境用到的变量
VITE_APPNAME = 正式的应用名称

vite的配置文件

vite.base.config.js

//  基础环境配置,目前来讲还没有配置任何的内容
import { defineConfig } from "vite"
console.log('load base-config...')
export default defineConfig({
})

vite.dev.config.js

// 开发环境的配置,目前来讲还没有配置任何的内容
import { defineConfig } from "vite"
console.log('load dev-config...')
export default defineConfig({ 
})

vite.prod.config.js

// 生产环境的配置,目前来讲还没有配置任何的内容
import { defineConfig } from "vite"
console.log('load prod-config...')
export default defineConfig({
})

vite.config.js

// 主要的vite的配置文件
import { defineConfig } from "vite"
// 读取环境变量的
{ loadEnv } from "vite"

// 引入三个环境配置文件
import ViteBaseConfig from "./environment/vite.base.config"
import ViteProdConfig from "./environment/vite.prod.config"
import ViteDevConfig from "./environment/vite.dev.config"

// 策略模式做一个动态的配置
const envResolver = {
   "build":()=>{
       console.log("生产环境")
       // 解构的语法
       return ({...ViteBaseConfig,...ViteProdConfig})
   },
   "serve":()=>{
       console.log("开发环境")
       // 另一种写法
       return Object.assign({},ViteBaseConfig,ViteDevConfig)
   }
}

// 根据 参数 command 的值,使用不同的环境配置文件
export default defineConfig(({command,mode})=>{


   console.log("command : ",command)

   // 指定读取的环境变量的文件
   // 第一个参数 : mode
   // 第二个参数 :文件的目录,自己指定,不一定是 process.cwd()
   // 第三个参数 :目前还没有搞明白是干啥的,直接使用空字符串就行
   const env = loadEnv(mode,process.cwd(),"")
   console.log("env : ",env)

   // 根据不同的环境使用不同的配置文件,注意这个地方的写法,非常的奇特
   return envResolver[command]()
})

main.js

只干了一个事儿 : 就是读取 环境变量的值

// 使用环境变量
console.log(import.meta.env)

index.html

只干了一个事儿 : 引入main.js,执行一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    测试一个普通的前端项目
    <script type="module" src="./main.js" ></script>
    
</body>
</html>

package.json中的脚本

这里主要展示一下执行的脚本

  "scripts": {
    "dev": "vite",
    "dev1": "vite --mode production",
    "prod": "vite build"
  },

运行测试

development 环境

npm run dev

在这里插入图片描述

development 环境

npm run dev1
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1203068.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【LeetCode】每日一题 2023_11_13 区域和检索 - 数组可修改(树状数组/线段树)

文章目录 刷题前唠嗑题目&#xff1a;区域和检索 - 数组可修改题目描述代码与解题思路偷看大佬题解 结语 刷题前唠嗑 LeetCode? 启动&#xff01;&#xff01;&#xff01; 今天是中等题&#xff0c;貌似挺简单的&#xff0c;先试试水 题目&#xff1a;区域和检索 - 数组可修…

2012年7月2日 Go生态洞察:Google I/O 2012的Go视频精选

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

vue3配置环境变量,小白简单易学

环境变量的意义就是防止我们更新打包的时候写错变量&#xff0c;合并代码这些一系列问题 首先看看效果 左边是本地测试环境&#xff0c;右边是打包后的生产环境&#xff0c;写这个环境变量的好处就是&#xff0c;你在本地开发的时候变量随便改&#xff0c;不会影响生产环境&am…

“大学生”返乡投身乡村建设,直播电商成为返乡创业新潮流!

数字乡村建设是新时代乡村振兴的必经之路&#xff0c;它是伴随网络化、信息化和数字化在农业农村经济社会发展中的应用&#xff0c;以及农民现代信息技能的提高而内生的农业农村现代化发展和转型进程&#xff0c;既是乡村振兴的战略方向&#xff0c;也是建设数字中国的重要内容…

基于DBO算法的WSN节点覆盖优化

先做一个声明&#xff1a;文章是由我的个人公众号中的推送直接复制粘贴而来&#xff0c;因此对智能优化算法感兴趣的朋友&#xff0c;可关注我的个人公众号&#xff1a;启发式算法讨论。我会不定期在公众号里分享不同的智能优化算法&#xff0c;经典的&#xff0c;或者是近几年…

C++编程爬虫代码全过程分享

以下是使用C编写一个爬虫程序的基本步骤和代码示例&#xff1a; 1、首先&#xff0c;我们需要包含必要的库文件。在这个例子中&#xff0c;我们将使用<iostream>、<string>和<curlpp/cURLpp.hpp>库。 #include <iostream> #include <string> #i…

shell 语法介绍

大家好&#xff0c;我是蓝胖子&#xff0c;在日常开发中或多或少都会接触到shell脚本&#xff0c;可以说会shell脚本是一位后端开发的基本功&#xff0c;今天我将会花上一篇文章总结下常见的shell的语法&#xff0c;学完本篇&#xff0c;相信简单的shell脚本就能够看懂了&#…

世微 降压恒流 12V 5A 一切一双灯 LED汽车大灯驱动方案 AP5191

AP5191是一款PWM工作模式,高效率、外围简 单、内置功率MOS管&#xff0c;适用于4.5-150V输入的高 精度降压LED恒流驱动芯片。输出功率150W&#xff0c; 电流6A。 AP5191可实现线性调光和PWM调光&#xff0c;线性调 光脚有效电压范围0.55-2.6V. AP5191 工作频率可以通过RT 外部…

想要检测TikTok网络是否安全?这五个网站请收好

Tiktok目前在海外大火&#xff0c;越来越多的人想要进入TikTok的海外市场并捞一桶金。然而&#xff0c;成功并非易事。想要在TikTok中立足&#xff0c;我们必须保证我们的设备、网络环境和网络节点完全符合官方的要求&#xff0c;并且没有任何异常或风险。那么我们该如何设置、…

MAC地址注册的原理和应用

MAC地址注册是指在网络设备中&#xff0c;将设备的物理地址&#xff08;即MAC地址&#xff09;与设备的IP地址进行关联和注册的过程。MAC地址是以太网卡硬件上的独特标识符&#xff0c;用于在局域网中标识网络设备。 MAC地址注册在网络管理中起到重要作用&#xff0c;它可以帮助…

Python 框架学习 Django篇 (十) Redis 缓存

开发服务器系统的时候&#xff0c;程序的性能是至关重要的。经过我们前面框架的学习&#xff0c;得知一个请求的处理基本分为接受http请求、数据库处理、返回json数据&#xff0c;而这3个部分中就属链接数据库请求的响应速度最慢&#xff0c;因为数据库操作涉及到数据库服务处理…

2011年12月21日 Go生态洞察:了解Go社区

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

无人地磅称重系统|自助过磅 料仓联动 自助卸料

上海思伟无人地磅系统 自助过磅、 自助卸料 、料仓联动 智能、省人、安全 无人监管过磅 对地磅及其相关的所有硬件进行配置和管理&#xff1b; 支持红外、道闸、车牌识别、AI分析、拍照存档、LED语音播报一体机等设备&#xff1b; 实现稳定可靠的无人监管称重功能&#xf…

软件测试之蚂蚁金服面试题,含答案

对于想要去面试的小伙伴们看过来&#xff0c;小编为大家总结了蚂蚁的面试题&#xff0c;其实很多面试题很多公司都差不多。主要看自己如何灵活回答&#xff0c;大家可以灵活回应。希望对大家有所帮助。 一&#xff1a;基础部分&#xff1a; Q1. 什么是软件测试&#xff1f; 答…

rhcsa-权限

文件目录 r 读取权限 可以列出目录下的文件 w 修改权限 可以进行创建和删除等操作 x 执行权限 能进入到该目录/切换到该目录 - 没有权限 没有权限 chmod change mod 作用&#xff1a;修改文件或目录的权限 语法&…

远程办公方案

员工通过传统的VPN登录或端口映射方式从互联网访问内网应用存在诸多的安全及体验不佳等问题&#xff0c; 通过身份云基于零信任网络架构的应用网关&#xff0c;可以完全替换传统的vpn方案&#xff0c;让您的员工随时随地安全、便捷、高效访问内网应用。 企业面临的挑战 企业出…

圆形承重钢管用在线直线度测量仪实时检测品质!

关于直线度尺寸的检测&#xff0c;相信你听说过很多诸如直线法、直尺法、激光准直法等的离线检测方式&#xff0c;那你听说过在线直线度测量仪吗&#xff1f;它是可安装在产线上进行实时在线检测的设备。本文就跟随小编一起来简单的了解一下。 在线直线度测量仪的测量方法 直…

SDL2 加载图片

1.简介 在SDL中&#xff0c;本身只支持加载BMP格式的图片SDL_LoadBMP&#xff0c;如果想要加载别的格式图片&#xff0c;需要编译SDL_image库。 SDL_image库中IMG_Load和都是IMG_LoadTexture用于加载图片的函数&#xff0c;但是它们的使用方式和返回值有所不同。 IMG_Load和…

ChIP在植物领域中的应用

01 什么是ChIP&#xff1f; 染色质免疫共沉淀技术&#xff08;Chromatin Immunoprecipitation assay&#xff0c;ChIP&#xff09;是研究体内DNA与蛋白质相互作用的方法。其基本原理是在细胞生理状态下固定蛋白质-DNA复合物&#xff0c;将其随机打断为一定长度范围内的染色质小…

腾讯云优惠券如何领取?腾讯云服务器怎么买便宜?

腾讯云深知用户对价格的重视&#xff0c;因此在每年的618、双11、双12等大型促销活动中推出了大量优惠活动。这些优惠活动包括打折、满减、买赠等形式&#xff0c;让用户在购买腾讯云主机服务器时能够享受到更多的实惠。特别是在这些促销活动期间&#xff0c;用户可以通过领取优…