vite / nuxt3 项目使用define配置/自定义,可以使用process.env.xxx获取的环境变量

每日鸡汤:每个你想要学习的瞬间,都是未来的你向自己求救

首先可以看一下我的这篇文章了解一下关于 process.env 的环境变量。

对于vite项目,在我们初始化项目之后,在浏览器中打印 process.env,只有 NODE_ENV这个变量,这是vite 打包工具自已定义的,无需我们手动再配置。

有的时候我想自己定义新的环境变量 MY_ENV,并且要求可以使用 process.env.MY_ENV 获取,在这篇文章提到的是webpack 项目的配置方式:

在webpack.config.js中使用,使用 plugins + new webpack.DefinePlugin 定义【看下图的中间部分】

同样的,对于 vite  项目我们也可以自定义,定义方法是在 vite.config.js 中使用 define 定义,请看vite 官方文档

// vite.config.ts
import { defineConfig } from 'vite'export default defineConfig({// 省略其他配置define: {// 注意要用 JSON.stringify'process.env.MY_ENV': JSON.stringify('this is my env'),},// 省略其他配置
})

这样我们在其他文件中就可以使用 process.env.MY_ENV 了

同样的,在 nuxt3 项目中,我们也可以用 vite 的这个功能设置。牢记 nuxt3 就是用vite打包的!

// https://nuxt.com/docs/api/configuration/nuxt-config
// nuxt.config.ts
export default defineNuxtConfig({// nuxt3 的配置文件中有一个vite的配置项vite: {define: {'process.env.MY_ENV': JSON.stringify('this is my env'),},},
})

以上说的环境变量一般来说都是一个常量!

但是如果你想设置一个变量也不是不行,比如一个跟时间绑定的变量,但是注意这个变量,需要在vite.config.ts 或者 在 nuxt.config.ts中声明,不能从别的文件导入,因为会报错,不信你试试。

比如在vite项目中, 在配置文件 vite.config.ts 中声明一个变量,然后用 define 声明成环境变量之后,对于其他引用环境变量的文件来说就是常量了!


// vite.config.ts
import { defineConfig } from 'vite'
// 这是在配置文件中声明的变量
const version = `version- ${new Date().getTime()}`
// 注意不能这么写,不能在配置文件中导出常量,所以我们要利用环境变量“导出”
// export const version = `version- ${new Date().getTime()}`
export default defineConfig({// 省略其他配置define: {// 从配置到环境变量之后,对于其他文件来说就是常量了'process.env.VERSION': JSON.stringify(version),},// 省略其他配置
})

对于上述的 process.env.VERSION 这个环境变量,在每次重新打包之后都会变,因为是和打包时间绑定的,所以可以用来判断版本是否更新!

我还是觉得,除了上面说的类似 process.env.VERSION 这样跟打包绑定的环境变量来说,貌似没必要在配置文件中使用配置环境变量的方法设置一个值永远都不会变常量,因为这和你在一个 ts 文件中使用 const 声明一个常量,然后再导出【export】貌似没有太大的区别,唯一的区别就是使用 const 声明的变量需要导入【import】 。 而环境变量中的不用导入!

如果你想用环境变量来区分开发环境和生产环境,那么不妨看看我的这篇文章

nuxt3/服务端渲染项目,环境变量的配置,区分正式环境和测试环境_我有一棵树的博客-CSDN博客

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

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

相关文章

【组内工作】木马回联

文章目录 C2服务器安装和运行方法CrossC2运行方法sliver运行方法empire安装方法DeimosC2安装教程TrevorC2安装教程: C2服务器的流量特征CrossC21. 心跳包2. 命令3. ja3/ja3s Sliver1. http2. https empirehttphttps DeimosC2https TrevorC2 C2服务器安装和运行方法 …

Python - 嵌入式数据库Sqlite3的基本使用

SQLite是一种轻量级的嵌入式关系型数据库管理系统,而Python标准库中提供了与SQLite交互的模块,sqlite3。下面是一个Python 3中使用sqlite3模块的详细示例与解析。 import sqlite3 # 创建或连接数据库 conn sqlite3.connect(example.db) # 创建一个…

iperf3 编译安装及网讯WX1860千兆网口测试

iperf3 编译安装及网讯1860千兆网口测试 编译安装 安装包下载地址:https://github.com/esnet/iperf/archive/refs/tags/3.8.tar.gz 将安装包iperf-3.8.tar.gz拷贝测试系统盘桌面,使用如下命令进行编译安装: tar zxvf iperf-3.8.tar.gz cd iperf-3.8 ./configure make s…

48,排序算法merge

功能描述: 两个容器元素合并,并储存到另一容器中 函数原型: merge(iterator beg1,iterator end1,iterator beg2,iterator end2,iterator dest); //容器元素合并,并存储到另一个容器中 //注意:两个容器必须是有序的…

vue : 无法加载文件 C:\Users\jianfei\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。...

背景 在新电脑上配置vue环境 PS E:\CODE_PROJ\myvue\vue23\P61_使用脚手架\vue_test> npm install -g vue/cli npm WARN deprecated source-map-url0.4.1: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated urix0.1.0: Please see https://git…

Unity UGUI的PhysicsRaycaster (物理射线检测)组件的介绍及使用

Unity UGUI的PhysicsRaycaster (物理射线检测)组件的介绍及使用 1. 什么是PhysicsRaycaster组件? PhysicsRaycaster是Unity UGUI中的一个组件,用于在UI元素上进行物理射线检测。它可以检测鼠标或触摸事件是否发生在UI元素上,并将事件传递给…

【btoa()方法在linux系统中,出现报错】

问题1:为什么在linux系统中,var sendEncoded btoa(deviceData);这里会出现下面的报错? UnhandledPromiseRejectionWarning: ReferenceError: btoa is not defined 分析如下:在Linux系统中,Node.js默认情况下不支持b…

HDFS基本操作命令

这里写目录标题 HDFS Shell CLI客户端说明常用命令hadoop fs -mkdir [-p] <path>hadoop fs -ls [-h] [-R] [<path>...]上传文件到指定目录下方法一:hadoop fs -put [-f] [-p] <localsrc>.....<dst>方法二&#xff1a;hadoop fs -moveFromLocal <loc…

设计模式系列:经典的单例模式

单例模式,是设计模式当中非常重要的一种,在面试中也常常被考察到。 正文如下: 一、什么时候使用单例模式? 单例模式可谓是23种设计模式中最简单、最常见的设计模式了,它可以保证一个类只有一个实例。我们平时网购时用的购物车,就是单例模式的一个例子。想一想,如果购物…

docker基于centos7镜像安装python3.7.9

下载centos7镜像 docker pull centos&#xff1a;centos7 启动容器centos-python-3.7 docker run -itd --name centos-python-3.7 -p 60021:22 --privileged centos:centos7 /usr/sbin/init 进入容器 docker exec -it centos-python-3.7 /bin/bash centos7环境下安装python3.7.…

vue2企业级项目(四)

vue2企业级项目&#xff08;四&#xff09; 路由设计&#xff0c;过场动画设计 1、router 项目下载依赖 npm install --save vue-router3.5.3src目录下创建router/index.js import Vue from "vue"; import Router from "vue-router";Vue.use(Router);con…

Java那些“锁”事 - 可重入锁(递归锁)

可重入锁是一种线程同步的机制&#xff0c;它允许线程多次获取同一个锁&#xff0c;而不会产生死锁。可重入锁的特点是在持有锁的情况下可以再次进入同步代码块或方法&#xff0c;而不会被阻塞。ReentrantLock和synchronized都是可重入锁。ReentrantLock属于显式可重入锁&#…

Vue源码学习 - 异步更新队列 和 nextTick原理

目录 前言一、Vue异步更新队列二、nextTick 用法三、原理分析四、nextTick 源码解析1&#xff09;环境判断2&#xff09;nextTick() 五、补充 前言 在我们使用Vue的过程中&#xff0c;基本大部分的 watcher 更新都需要经过 异步更新 的处理。而 nextTick 则是异步更新的核心。…

MacOS本地安装Hadoop3

金翅大鹏盖世英&#xff0c;展翅金鹏盖世雄。 穿云燕子锡今鸽&#xff0c;踏雪无痕花云平。 ---------------- 本文密钥&#xff1a;338 ----------------- 本文描述了在macbook pro的macos上安装hadoop3的过程&#xff0c;也可以作为在任何类linux平台上安装hadoop3借鉴。 …

4、Linux驱动开发:设备-设备号设备号注册

目录 &#x1f345;点击这里查看所有博文 随着自己工作的进行&#xff0c;接触到的技术栈也越来越多。给我一个很直观的感受就是&#xff0c;某一项技术/经验在刚开始接触的时候都记得很清楚。往往过了几个月都会忘记的差不多了&#xff0c;只有经常会用到的东西才有可能真正记…

Verilog语法学习——LV2_异步复位的串联T触发器

LV2_异步复位的串联T触发器 题目来源于牛客网 [牛客网在线编程_Verilog篇_Verilog快速入门 (nowcoder.com)](https://www.nowcoder.com/exam/oj?page1&tabVerilog篇&topicId301) 题目 题目描述&#xff1a; 用verilog实现两个串联的异步复位的T触发器的逻辑&#x…

MATLAB算法实战应用案例精讲-【深度学习】预训练模型GPTXLNet

目录 GPT 1. 介绍 1.1 GPT的动机 2. 模型结构 3. GPT训练过程 3.1 无监督的预训练

【LeetCode】141.环形链表

题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&#…

opencv-22 图像几何变换01-缩放-cv2.resize()(图像增强,图像变形,图像拼接)

什么是几何变换&#xff1f; 几何变换是计算机图形学中的一种图像处理技术&#xff0c;用于对图像进行空间上的变换&#xff0c;而不改变图像的内容。这些变换可以通过对图像中的像素位置进行调整来实现。 常见的几何变换包括&#xff1a; 平移&#xff08;Translation&#x…

IT行业面试攻略:技巧与心态的平衡

引言&#xff1a;在面试IT公司时&#xff0c;调整好心态是取得优秀表现的关键。面试心态直接影响着我们在面试中的自信程度和表现。面对这一挑战&#xff0c;我们需要学会积极自信、认识到紧张是正常的、进行充分准备以及以积极的心态去迎接面试。只有在拥有正确的心态下&#…