解析vue中的process.env

一、介绍

1、process

process是 nodejs 下的一个全局变量,它存储着 nodejs 中进程有关的信息。

2、process.env

env 是 environment 的简称,process.env属性返回一个包含用户环境的对象。

3、dotenv

Dotenv 是一个零依赖的模块,它能将环境变量中的变量从 .env 文件加载到 process.env 中。

在终端中输入node进入node环境再输入process.env,可以打印出信息如下图:

在这里插入图片描述

二、使用

1、在nodejs中使用

1、安装

npm install dotenv

2、根目录下创建 .env 文件

HOST = localhost
PORT = 8080

3、入口文件中引入 dotenv 并使用

require("dotenv").config({path: '.env'})
console.log(process.env.HOST); // localhost
console.log(process.env.PORT); // 8080

2、在vue中使用

在使用脚手架创建项目的时候,会自动安装dotenv,可以从package-lock.json中找到配置
在这里插入图片描述

在main.js入口文件中打印

console.log(process.env);

在这里插入图片描述

可以看出,默认的模式是development即开发模式。

模式

官网描述如下:https://cli.vuejs.org/zh/guide/mode-and-env.html

在这里插入图片描述
也就是说,在Vue中, NODE_ENV 可以通过 .env 文件或者.env.[mode]文件配置。配置过后,运行 Vue CLI 指令( npm run dev(serve) ,npm run build )时,就会将该模式下的NODE_ENV载入其中了。而这些命令,都有自己的默认模式:

  • npm run dev(serve) ,其实是运行了 vue-cli service serve ,默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV
  • npm run build ,其实运行了 vue-cli service build ,默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV

在这里插入图片描述

在根目录下创建文件

在这里插入图片描述

NODE_ENV = production

注意:只有 NODE_ENVBASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

NODE_ENV = development
VUE_APP_BASE_API = 'http://localhost:8099/'

再打印 process.env的信息如下:

在这里插入图片描述

注意:.env 环境文件是通过运行 vue-cli-service 命令载入的,因此环境文件发生变化,你需要重启服务

除了以上的修改方式外,也可以在命令后直接使用--mode参数手动指定模式。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯刷题冲刺 | 倒计时16天

作者:指针不指南吗 专栏:蓝桥杯倒计时冲刺 🐾马上就要蓝桥杯了,最后的这几天尤为重要,不可懈怠哦🐾 文章目录1.青蛙跳杯子1.青蛙跳杯子 题目 链接: 青蛙跳杯子 - 蓝桥云课 (lanqiao.cn) X 星球的…

用于人工智能研究的开源Python微电网模拟器pymgrid(入门篇)

pymgrid是一个开源Python库,用于模拟微型电网的三级控制,允许用户创建或自行选择的微电网。并可以使用自定义的算法或pymgrid中包含的控制算法之一来控制这些微电网(基于规则的控制和模型预测控制)。 pymgrid还提供了与OpenAI Gy…

初识冯诺依曼体系结构

目录 1.冯诺依曼体系结构 2.冯诺依曼体系的原理 3.数据流向 4.冯诺依曼体系的意义 1.冯诺依曼体系结构 我们常见的计算机,如笔记本。我们不常见的计算机,如服务器,大部分都遵守冯诺依曼体系。 (1)输入单元:…

JavaEE-多线程中wait和notify都有哪些区别?

更多内容请点击了解 本篇文章将详细讲述wait和notify的区别,请往下看 目录 更多内容请点击了解 文章目录 一、wait和notify概念 二、wait()方法详解 三、notify()方法详解 代码如下: 3.1notifyAll()详解 四、wait和sleep的对比 一、wait和notif…

Docker容器高级篇

文章目录一、Dockerfile文件1.dockerfile基础知识2.docker执行dockerfile的大致流程3.dockerfile常用保留字4.dockerfile构建镜像示例二、docker network1.docker net常用指令2.docker的网络模式三、docker-compose容器编排1.下载安装2.三个步骤3.compose常用命令4.不使用docke…

Java Web 实战 17 - 计算机网络之传输层协议(2)

大家好 , 这篇文章继续给大家讲解 TCP 协议当中的一些操作 , 比如 : 滑动窗口、流量控制、拥塞控制、延时应答、捎带应答、面向字节流这几个提升 TCP 效率的操作 . 我们还会给大家分析 TCP 连接出现异常的时候 , 该如何处理 . 最后会将 TCP 和 UDP 进行比较 上一篇文章的链接也…

【计组】RAM的深入理解

一、存储机理 RAM的实现逻辑有种,分别是触发器和电容。 SRAM(Static)DRAM(Dynamic)存储方式触发器电容破坏性读出否(触发器具有稳态,能够锁住0或1两种状态)是(电容需要…

面试热点题:回溯算法 递增子序列与全排列 II

前言: 如果你一点也不了解什么叫做回溯算法,那么推荐你看看这一篇回溯入门,让你快速了解回溯算法的基本原理及框架 递增子序列 给你一个整数数组 nums ,找出并返回所有该数组中不同的递增子序列,递增子序列中 至少有两…

K8S + GitLab + Jenkins自动化发布项目实践(二)

K8S GitLab Jenkins自动化发布项目实践(二)Jenkins容器化部署部署NFS PV存储Jenkins部署Jenkins初始化安装Jenkins插件Jenkins主从架构配置Kubernetes插件配置安装nerdctl工具自定义Jenkins Slave镜像测试主从架构是否正常前置工作:已部署5…

Linux中滴计划任务

计划任务计划任务计划任务分类at命令load averagecrontab命令配置文件通常包含三个部分cron服务配置文件cron服务的日志文件时间数值的特殊表示方法应用实例案例anacron服务计划任务 计划任务(Cron Job)是指在预定的时间自动执行一些指定的任务或脚本。…

【蓝桥杯专题】 树状数组(C++ | 洛谷 | acwing | 蓝桥)

菜狗现在才开始备战蓝桥杯QAQ 文章目录【蓝桥杯专题】 (C | 洛谷 | acwing | 蓝桥)什么是线段数组??1264. 动态求连续区间和数星星线段树AcWing 1270. 数列区间最大值PPPPPPP【蓝桥杯专题】 (C | 洛谷 | acwing | 蓝桥) 什么是…

华为OD机试用java实现 -【最多获得的短信条数】(2023-Q1 新题)

最近更新的博客 华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试,独家整理 已参加机试人员的实战技巧本篇题解:最多获得的短信条数 题目 某…

linxu学习之进程

文章目录进程程序和进程产生进程销毁进程多进程高并发设计孤儿僵尸守护进程孤儿进程:守护进程(重点)僵尸进程:进程 程序和进程 操作系统可以运行多个程序,那他是如何运行的?实际上,CPU的执行是很快的,而待…

【FreeRTOS(一)】FreeRTOS新手入门——初识FreeRTOS

初识FreeRTOS一、实时操作系统概述1、概念2、RTOS的必要性3、RTOS与裸机的区别4、FreeRTOS的特点二、FreeRTOS的架构三、FreeRTOS的代码架构一、实时操作系统概述 1、概念 RTOS:根据各个任务的要求,进行资源(包括存储器、外设等&#xff09…

【TypeScript入门】TypeScript入门篇——枚举(enum)

TypeScript是一种静态类型、可选的编程语言,它在JavaScript的基础上添加了类型检查、接口、枚举等新特性,可以让开发更加高效、代码更加健壮。在TypeScript中,枚举是一种特殊的数据类型,它可以用来定义一组命名的常量,…

网络通信之应用层协议--Linux

文章目录关于应用层协议的理解应用层协议的制定理论部分代码部分完整代码以及测试HTTP协议代码测试HTTP协议HTTPS协议加密原因基础的加密方式数据摘要(数据指纹)数字签名HTTPS的加密方式的选择总结关于应用层协议的理解 在之前的一篇关于套接字实现网络…

天梯赛刷题小记 —— L2

最近在重刷 天梯赛&#xff0c;浅浅记录一下&#xff0c;进入L2阶段了 L2-001 紧急救援 解题思路&#xff1a;典型的dijkstra模板题&#xff0c;带路径记录与权重&#xff0c;方案数记录&#xff0c;解析出过 Dijkstra(兼路径) #include <bits/stdc.h> #define inf…

【数据分析之道-基础知识(三)】元组

文章目录专栏导读1、元组简介2、元组创建3、元组查找操作4、元组删除操作5、元组修改操作6、元组增加操作7、元组内置函数专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN Python领域新星创作者&#xff0c;专注于分享python领域知识。 ✍ 本文录入于《数据分析之道》&…

自动驾驶控制概况

文章目录1. 第一章行为决策在自动驾驶系统架构中的位置2. 路径跟踪控制的种类2.1 基于自行车模型的路径跟踪控制算法2.1.1 纯跟踪控制&#xff08;Pure Pursuit&#xff09;算法2.1.2 后轮反馈控制算法&#xff08;Rear wheel feedback&#xff09;2.1.3前轮反馈控制算法&#…

防火墙 NAT地址转换

网络地址转换&#xff08;NAT&#xff09;是一种用于访问Internet访问模式广域网&#xff08;WAN&#xff09;的技术&#xff0c;用于将私有&#xff08;保留&#xff09;地址转换为合法IP地址。NAT不仅能够有效地额抵抗外部网络攻击&#xff0c;还能够在IP地址分配不理想&…