vue中的process.env的理解

news2025/1/7 6:35:43

创建项目的时候突然发现好多前端有好多地方用到了这个process.env.xxxx但是发现其实我的新项目并没有定义这个内容,于是就对这个变量产生了好奇,这里总结一下
在这里插入图片描述
上图是我在node命令行下执行的查看了一下变量,看这情况直接是把系统的环境变量给读到了,这。。。并不是我想要的,我只想在程序中自己在某个地方设置环境变量并且在我项目的环境下可以用就行了。。

vue给这种配置做了相当的配置

首先说一个配置内容

  "scripts": {
    "serve": "vue-cli-service serve",// 会将process.env.NODE_ENV设置为development
    "build": "vue-cli-service build",// 会将process.env.NODE_ENV设置为production

这是官方看到的解释
在这里插入图片描述
也就是说,在 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 。
修改方式如下,以键值对的方式:
在这里插入图片描述
如何应用这个环境变量
模式的应用

有了模式的概念,就可以根据不同的环境配置模式,就不用每次打包时都去更改 vue.config.js 文件了。比如在测试环境和生产环境, publicPath参数 (部署应用包时的基本 URL) 可能不同。遇到这种情况就可以在 vue.config.js 文件中,将 publicPath 参数设置为:
publicPath: process.env.BASE_URL
设置之后,再在各个 .env.[mode] 文件下对 BASE_URL 进行配置就行了,这样就避免了每次修改配置文件的尴尬。其他的配置也是同理。
Tips: 即使不是生产环境,也可以将模式设置为 production ,这样可以获得 webpack 默认的打包优化。

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

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

相关文章

少走弯路,关于在线客服系统的二三事

日常生活中,我们购买一个服务或一个商品时,时常会遇到以下场景: 售前咨询:向商家咨询服务的信息咨询、商品的规格产品咨询、以及商场活动、优惠咨询等 售后服务:商品使用问题、商品不满意退/换货等 在移动通信没有普…

Camera Surface 从应用到cameraserver的流转

一、Android相机应用与Surface Camera应用的预览一般通过SurfaceView去显示,SurfaceView作为显示的载体, Surface surface mSurfaceView.getSurfaceHolder().getSurface(); 获取的surface会通过Camera API1/API2的接口下发到framework层;…

基于模型的设计(MBD)在汽车ECU软件开发中的实践

基于模型的设计(Model-based Design,以下简称MBD)是一种围绕模型展开的项目开发方法,指对开发对象或者项目产品进行精确建模,项目的需求分析、功能设计、系统框架、代码生成、测试验证等开发环节都在模型的基础上展开。…

如何用策略模式,优化你代码里的的if-else?

最近有一个学妹在跟我沟通如何有效的去避免代码中一长串的if else判断或者switch条件判断?针对更多的回答就是合理的去使用设计来规避这个问题。 在设计模式中,可以使用工厂模式或者策略模式来处理这类问题,之前已经分享了工厂模式&#xff…

Hadoop集群中HDFS的API测试案例以及MapReduce的多种提交Job方式案例

这两个案例默认是hadoop集群环境已经搭建好以及IDEA环境也已经配置好 1、HDFS客户端测试案例 1.1、pom依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www…

Java使用ftl模板文件生成Word,以及Word转换图片或Pdf工具类

Java使用ftl模板文件生成Word 一、写在前面 最近在项目中使用打印功能&#xff0c;发现这个功能我已经写过多次了&#xff0c;下面这个文章的发步日期在2020年&#xff0c;不得不感慨时间之快啊。 https://blog.csdn.net/weixin_43238452/article/details/109636200?spm1001…

this关键字,是如何把你难倒的?

作为一名实战前端工程师&#xff0c;在jq时代&#xff0c;是经常被this关键字难倒的。几年前每次我意识到程序出现问题的时候&#xff0c;都本能反应是自己的this没有绑定好&#xff0c;于是重新绑定一下&#xff0c;就能解决了。但是他确实一直为难着我。 转眼到了2022年底&a…

图解LeetCode——1780. 判断一个数字是否可以表示成三的幂的和(难度:中等)

一、题目 给你一个整数 n &#xff0c;如果你可以将 n 表示成若干个不同的三的幂之和&#xff0c;请你返回 true &#xff0c;否则请返回 false 。 对于一个整数 y &#xff0c;如果存在整数 x 满足 y 3^x &#xff0c;我们称这个整数 y 是三的幂。 二、示例 2.1> 示例…

SpringBoot面试杀手锏——自动配置原理

引言 不论在工作中&#xff0c;亦或是求职面试&#xff0c;Spring Boot已经成为我们必知必会的技能项。除了某些老旧的政府项目或金融项目持有观望态度外&#xff0c;如今的各行各业都在飞速的拥抱这个已经不是很新的Spring启动框架。 当然&#xff0c;作为Spring Boot的精髓…

凌恩客户文章|JCR 一区:多组学联合分析揭示PCOS真元凶

期刊&#xff1a;Journal of Ovarian Research 影响因子&#xff1a;5.506 发表时间&#xff1a;2022年10月 客户单位&#xff1a;汕头大学医学院第一附属医院鄞国书课题组 一、研究背景 多囊卵巢综合征(PCOS)是导致育龄妇女不孕的最常见内分泌疾病…

MyBatis二 MyBatis常见面试题

一 MyBatis是什么&#xff1f; MyBatis是一款优秀的持久层框架&#xff0c;一个半ORM &#xff08;对象关系映射&#xff09;框架&#xff0c;它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数以及获取结果集。MyBatis可以使用简单的XM…

postman+newman+jenkins持续集成

今天为大家带来的是postmannewmanjenkins进行API接口测试的持续集成: 一. postman测试实战 postman测试API接口是通过JavaScript脚本完成测试中的功能, 在请求发起前后实现测试操作. 常用功能: 请求前脚本(pre-request scripts)设置请求前置操作如设置变量等 请求后在tests…

UE多实例云渲染之Nginx代理

Nginx的Https代理 我们实现UE像素流时大部分使用的是http协议&#xff0c;但是某些时候前端由于某些功能问题需要使用https的协议(如前端调用本地摄像头&#xff09;需要使用https协议。如果此时在内部使用http请求就会被block掉。其中一种简单的方案就是通过修改浏览器的安全…

SOLID设计原则

1. SRP单一职责原则 任何一个软件模块都应该有且仅有一个被修改的原因。 反例是一个类的三个方法给三个部门提供服务&#xff0c;而这三个方法有一些公共子方法&#xff0c;很有可能因为A部门的代码变更改动&#xff0c;导致B、C部门调用的方法出现意料之外的结果。 2. OCP开…

nginx请求转发webSocket

原由 1.我有一个socket服务&#xff0c;用ip访问是成功的&#xff0c;但是老板说用这个不行&#xff0c;要用nginx请求转发&#xff0c;转发内网地址到某个域名 2.但是我改成了指定域名后失败&#xff0c;因为我没有配置nginx.conf 3.接下来一起学习下&#xff0c;怎么在ngin…

华硕电脑怎么录屏?华硕电脑录屏功能在哪?简单实用教程来了

​有很多小伙伴对如何录制华硕电脑的屏幕知识和信息知之甚少。现在大家都想多了解一些关于华硕电脑怎么录屏的相关知识和信息。所以今天小编收集了一些关于如何录制华硕电脑屏幕的知识和信息&#xff0c;与大家分享。 华硕电脑怎么录屏方法一&#xff1a;使用Windows自带的录屏…

day45 PHP反序列化POP链构造魔术方法原生类

前言 #知识点&#xff1a; 1、什么是反序列化操作&#xff1f;-格式转换 2、为什么会出现安全漏洞&#xff1f;-魔术方法 3、反序列化漏洞如何发现&#xff1f; -对象逻辑 4、反序列化漏洞如何利用&#xff1f;-POP链构造 补充&#xff1a;反序列化利用大概分类三类 -魔…

重磅来袭!共600页,又一分牛逼的Python文档面世!

前言 本文是为了帮大家快速学习 Python 中知识点&#xff0c;这套资料涵盖了诸多学习内容&#xff1a;面试题&#xff0c;教材视频&#xff0c;实战资料&#xff0c;电子书籍。 相信可以帮助大家在最短的时间内&#xff0c;能达到事半功倍效果&#xff0c;用来复习也是非常不…

150行代码写个低配版WPS?:手把手教你实现+附完整源码

前言&#xff1a;通过一个简单实例来实现Java的GUI编程&#xff0c;对于新手较为友好&#xff0c;且有一定的实用性&#xff0c;正在学习Java的同学看过来&#xff01;&#xff01;包教包会&#xff0c;如有疑问欢迎私信询问&#xff01; 目录 实例展示 一、GUI编程基本概念 …

java面向对象----抽象类 接口

目录 抽象类与抽象方法 概念 抽象类应用 接 口 概念 接口的特点&#xff1a; 接口应用举例 Java 8中关于接口的改进 内部类 如何声明局部内部类 局部内部类的特点 匿名内部类 总结 抽象类与抽象方法 概念 随着继承层次中一个个新子类的定义&#xff0c;类变得越…