Vue项目中全局变量process的用法解析

news2024/10/6 18:35:11

一、什么是process

        process对象是一个全局变量,提供了有关当前Node.js进程的信息并对其进行控制。常用于Vue项目中环境区分,对不同环境的配置不同,例如:根据全局变量区分请求的url地址、是否开始eslint、不同环境的特殊配置等等。

        可以在项目中新建js文件,输出process,得到一个配置对象。过多就仅展示部分截图:

二、如何使用process进行环境的区分

        Vue项目中有三个模式:production、development、test

        1.模式

        在vue-cli中模式是一个重要的概念,默认情况下有三个模式。

        对于下面所说的命令,大家可以看一下项目中的package.json文件,一看就明白了

  1. development 模式用于 vue-cli-service serve
  2. production 模式用于 vue-cli-service build 和 vue-cli-service test:unit
  3. test 模式用于 vue-cli-service test:unit

development模式对应我们开发环境对应的命令是 serve命令,也就是说我们启动项目后就在development模式下运行

production模式对应打包命令build。打包后在production模式下运行

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量:

vue-cli-service build --mode development

        总结,可以通过命令动态配置,配置对于模式下对应那些配置。

        我们一般通过.env文件进行请求地址的配置,例如存在多个地址的情况,可以通过命令进行灵活配置。

        2.process.env环境对象

        在不同的模式会有不同的环境变量

在 development 模式下 NODE_ENV 的值会被设置为 “development”
在 production模式下 NODE_ENV 的值会被设置为 “production” 

        3..env文件的执行顺序

.env 无论开发环境还是生产环境都会加载的配置文件
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件

研发环境 加载顺序:.env .env.development 同一个变量名 后者会覆盖前者
生产环境 加载顺序:.env .env.production 同一个变量名 后者会覆盖前者

三、 process的使用

        1.用于不同环境请求地址的区分

        新建.env文件,例如.env.development,在development环境下会载入该文件声明的变量。

        以VUE_APP_开头的变量会被webpack.definePlugin 静态嵌入到客户端侧的包中,访问时  process.env.VUE_APP_SECRET,添加变量直接以VUE_APP_* 的形式就可

# just a flag
NODE_ENV = 'development'

# base api
 VUE_APP_BASE_API = 'http://10.0.0.165:9588'

    然后请求url就可以拿到对应的值了

const service=axios.create({
    baseURL: process.env.VUE_APP_BASE_API,//请求地址
    timeout: 10000,//请求超时时间,如果超给改时间会中断
    // headers: {'X-Custom-Header': 'foobar'}//自定义请求头
})

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

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

相关文章

AiDB: 一个集合了6大推理框架的AI工具箱 | 加速你的模型部署

首发于GiantPandaCV公众号 项目地址: https://github.com/TalkUHulk/ai.deploy.box 网页体验: https://www.hulk.show/aidb-webassembly-demo/ PC: https://github.com/TalkUHulk/aidb_qt_demo Android: https://github.com/TalkUHulk/aidb_android_demo Go Server: https://gi…

[ Linux Audio 篇 ] 音频软件 Audacity 指导手册

音频软件 Audacity 指导手册 背景修订记录双声道提取到单声道查看频响特性查看增益导出Raw数据与作者沟通 背景 对于经常调试音频的开发人员来说,使用Audacity分析音频数据已经成为家常便饭。尤其对于日常使用Ubuntu / Linux等操作系统的开发人员来说,拥…

从构建者到设计者的低代码之路

低代码开发技术,是指无需编码或通过少量代码就可以快速生成应用程序的工具,一方面可降低企业应用开发人力成本和对专业软件人才的需求,另一方面可将原有数月甚至数年的开发时间成倍缩短,帮助企业实现降本增效、灵活迭代。那么&…

华为HCIA学习(一)

文章目录 一.根据考试题总结知识点(一题一点)二.上午学习三.下午学习四.今天只做了70题,需要的可以找我 一.根据考试题总结知识点(一题一点) 二.上午学习 ① VRP系统是VRP是华为公司从低端到高端的全系列路由器、交换…

MySQL数据库20G数据迁移至其他服务器的MySQL库或者云MySQL库

背景:20G的MySQL数据迁移至火山云MySQL库,使用navicat的数据传输工具迁移速度耗费时间过长。 方案一:使用火山云提供的MySQL数据迁移服务(其他大厂应该提供的也有) 方案二:使用数据迁移工具kettle&#x…

【记录贴】使用项目管理软件管理大型复杂项目是种什么体验?

随着手上的几个项目陆续验收交付,现在我又接了一个新项目,这次是一个中大型的软件开发项目。大型项目具有规模大、周期长、团队成员构成复杂、影响因素多等特征,所以我在项目推进过程中遇到了很多困难,想跟大家分享交流下&#xf…

深圳唯创知音电子将参加IOTE 2023第二十届国际物联网展•深圳站

​ 2023年9月20~22日,深圳唯创知音电子将在 深圳宝安国际会展中心(9号馆9B1)为您全面展示最新的芯片产品及应用方案,助力传感器行业的发展。 作为全球领先的芯片供应商之一,深圳唯创知音电子一直致力于为提供高质量、…

Python基于Flask的高校舆情分析,舆情监控可视化系统

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 运行效果图 基于Python的微博大数据舆情分析,舆论情感分析可视化系统 系统介绍 微博舆情分析系…

Pytest系列-内置标签skip和skipif 跳过测试用例的详细使用(5)

简介 skip和skipif,见名知意就是跳过测试,主要用于不想执行的代码,标记后,标记的代码不执行。希望满足某些条件才执行某些测试用例,否则pytest会跳过运行该测试用例实际常见场景:根据平台不同执行测试、跳…

互联网医院系统|互联网医院监管平台的作用

互联网医院系统已经逐渐成为了人们就医、看病、买药等方面的重要选择。而这种新型医疗模式对传统医疗行业带来了巨大的冲击和变革。那么互联网医院系统为什么要对接监管平台呢?接下来小编就给大家介绍下。 一、政策必要性 根据《互联网医院管理办法(试行…

【Linux环境】基础开发工具的使用:yum软件安装、vim编辑器的使用

​👻内容专栏: Linux操作系统基础 🐨本文概括: yum软件包管理、vim编辑器的使用。 🐼本文作者: 阿四啊 🐸发布时间:2023.9.12 Linux软件包管理 yum 什么是软件包 在Linux下安装软件…

vue2+three.js实现宇宙(进阶版)

2023.9.12今天我学习了vue2three.js实现一个好看的动态效果&#xff1a; 首先是安装&#xff1a; npm install three 相关代码如下&#xff1a; <!--3d宇宙效果--> <template><div><div id"content" /></div> </template> <…

无涯教程-JavaScript - RATE函数

描述 RATE函数返回年金每个周期的利率。 RATE通过迭代计算得出,可以有零个或多个解。如果RATE的连续输出在20次迭代后未收敛到0.0000001以内,则RATE返回#NUM!错误值。 语法 RATE (nper, pmt, pv, [fv], [type], [guess])有关参数nper,pmt,pv,fv和type的完整说明,请参见PV Fu…

二刷力扣--链表

链表 链表类型&#xff1a; 单链表&#xff08;可以访问后面的一个节点&#xff09; 双链表&#xff08;可以访问前后节点&#xff09; 循环链表&#xff08;最后一个节点指向首节点&#xff09; 在Python中定义单链表节点&#xff1a; class ListNode:def __init__(self, v…

TypeScript泛型

什么是泛型&#xff1f; "泛"就是广泛的意思&#xff0c;"型"就是数据类型。顾名思义&#xff0c;泛型就是适用于多种数据类型的一种类型。 泛型的作用 它能够帮助我们构建出复用性更强的代码 function getResult(value: number): number {return value…

高效办公必备,批量重命名与翻译一气呵成

在电脑使用中&#xff0c;我们常常需要批量修改文件名或对文件进行翻译。这时候&#xff0c;有一个得力的工具可以助你一臂之力&#xff0c;那就是“固乔文件管家”。下面就教你如何使用这个软件&#xff0c;轻松完成批量重命名和翻译大量文件的操作。 首先&#xff0c;你需要下…

基于 Alpine 环境构建 aspnetcore6-runtime 的 Docker 镜像

关于 Alpine Linux 此处就不再过多讲述&#xff0c;请自行查看相关文档。 .NET 支持的体系结构 下表列出了当前支持的 .NET 体系结构以及支持它们的 Alpine 版本。 这些版本在 .NET 到达支持终止日期或 Alpine 的体系结构受支持之前仍受支持。请注意&#xff0c;Microsoft 仅正…

mysql技术文档--之与redo log(重做日志)庖丁解析-超级探索!!!

阿丹&#xff1a; 在刚开始写本文章的是还不太清楚要如何去细啃下这两个体系&#xff0c;在查阅资料的过程中。发现大厂阿里的庖丁解InnoDB系列&#xff0c;详细了的写了很多底层知识&#xff0c;于是基于这个这两个文章才有了阿丹的这篇文章。 整体认知&#xff1a; 在 MySQ…

数据结构——排序算法——插入排序

交换法插入排序 void swap(vector<int> arr, int i, int j) {int temp arr[i];arr[i] arr[j];arr[j] temp;}void insertSort(vector<int> arr) {// 从第二个数开始&#xff0c;往前插入数字for (int i 1; i < arr.size(); i) {// j 记录当前数字下标int j …

骨传导耳机的危害有哪些?会损害听力吗?

如果正常的使用&#xff0c;骨传导耳机是没有危害的&#xff0c;由于骨传导耳机独特的传声方式&#xff0c;所以并不会对人体造成损伤&#xff0c;还可以在一定程度上保护听力。 如果想更具体知道骨传导耳机有什么危害&#xff0c;就要先了解什么是骨传导耳机&#xff0c;骨传…