vue中 process.env与process.VUE_CLI_SERVICE

news2024/10/1 21:44:24

在vue中设置环境变量离不开process.env属性,那么如何设置自定义环境变更呢?
可以通过设置.env文件或者借助process.VUE_CLI_SERVICE来设置

process

process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程。作为一个对象,它对于 Node.js 应用程序始终是可用的。

process.env

process.env 属性返回一个包含用户环境信息的对象。而 NODE_ENV 就是其中的一个环境变量。这个变量主要用于标识当前的环境(生产环境,开发环境)。相关属性可参考下图所示在这里插入图片描述

process.VUE_CLI_SERVIC

VUE_CLI_SERVIC是Vue CLI提供的,查看process.VUE_CLI_SERVIC属性,可以发现其实就是vue项目中的package.json中的配置内容。
在这里插入图片描述
在 Vue 中, NODE_ENV 可以通过 .env 文件或者 .env.[mode] 文件配置。配置过后,运行 Vue CLI 指令( npm run dev(serve) ,npm run build )时,就会将该模式下的NODE_ENV载入其中了。
development 模式 -----process.env.NODE_ENV为development
test 模式 ------------------process.env.NODE_ENV为test
production 模式 --------process.env.NODE_ENV为production

  • 可以通过传递 --mode 选项参数为命令行覆写默认的模式
"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test", 
  },
  • .vnv.test文件
    自定义的变量必须以 VUE_APP_ 开头只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
    如果是vue3+vite 必须使用VITE开头的配置信息 否则无法获取,示例:VITE_NODE_BUILD = “test”
//.vnv.test文件
NODE_ENV=production
VUE_APP_MODE=production
VUE_APP_BUILD=test // 自定义环境变更必须用VUE_APP_开头

对应关系图所示
在这里插入图片描述

注意事项

当运行 vue-cli-service 命令时,所有的环境变量都从对应的环境文件中载入。
如果文件内部不包含 NODE_ENV 变量,它的值将取决于模式,例如,在 production 模式下被设置为 “production”,在 test 模式下被设置为 “test”,默认则是 “development”
如果不配置.env.文件的话,通过设置自定义模式--mode custom来做处理时,在build时需要注意设置NODE_ENV 为 production,否则不能正常打包

const mode = process.VUE_CLI_SERVICE.mode === 'development' ? 'development' : 'production'
process.env.NODE_ENV = mode
process.env.VUE_APP_MODE = mode
let publicPath =process.VUE_CLI_SERVICE.mode === 'test' ? '/ag-collect-server-springcloud' : '/ag-collect'

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

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

相关文章

基于差分进化算法的微电网调度研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

Java经典笔试题—day12

Java经典笔试题—day12 🔎选择题🔎编程题🥝二进制插入🥝查找组成一个偶数最接近的两个素数 🔎结尾 🔎选择题 (1)以下方法,哪个不是对add方法的重载? public class Test {public void add( in…

智慧井盖监测终端,智能井盖-以科技解决智慧城市“顽疾”,守护城市生命线

平升电子智慧井盖监测终端,智能井盖-以科技解决智慧城市“顽疾”,守护城市生命线-智慧井盖,实现对井下设备和井盖状态的监测及预警,是各类智慧管网管理系统中不可或缺的重要设备,解决了井下监测环境潮湿易水淹、电力供应困难、通讯不畅等难题…

MySQL主从复制原理

一、概述 1、什么是主从复制 主从复制是用来建立一个和 主数据库完全一样的数据库环境称为从数据库;主数据库一般是准实时的业务数据库。 2、主从复制的作用 高可用,实时灾备,用于故障切换。比如主库挂了,可以切从库。读写分离…

nginx配置监听443端口,开启ssl协议,走 https 访问

本文目录 前言一、检查 linux 服务器上的 nginx 是否安装 ssl 模块二:为 nginx 安装 ssl 模块三、nginx 开启 443 端口监听(https配置)成功配好后的效果如下遇到的问题一:证书无效遇到的问题二:连公司的网络走 https 能…

飞书自建无需代码连接Flomo的方法

飞书自建用户使用场景: 公司的飞书群里,有一个名为“新产品开发”的群组,用于讨论公司新产品的开发。该群组中设置了一个机器人,名为“新产品助手”。当群组成员在讨论中需要记录一个新的产品想法时,他们可以这个机器人…

[Halcon3D] 主流的3D光学视觉方案及原理

📢博客主页:https://loewen.blog.csdn.net📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢本文由 丶布布原创,首发于 CSDN,转载注明出处🙉📢现…

STM32学习过程记录11——基于STM32G431CBU6硬件SPI+DMA的高效WS2812B控制方法

一种高效的WS2812B控制算法——基于STM32G431CBU6的SPIDMA 1.WS2812B介绍 ws2812b是一款集控制电路与发光电路于一体的智能外控LED光源,采用单线归0码协议,每个像素点的三基色颜色可实现256级亮度显示。速率能达到1024pixel 30fps / s,故被…

什么是可信时间戳?可信时间戳电子取证有效吗?

电子数据具有脆弱性、易变性、隐蔽性、载体多样性等特点,容易被复制、删除、篡改且难以被发现。因此,电子数据在实际的司法认定过程中,很难准确鉴定其生成的时间以及内容的真实性、完整性。可信时间戳是一种公认的技术手段,可为电…

拉格朗日插值定理

拉格朗日插值法是一种函数逼近方法,通过已知的数据点构建一个多项式函数,该函数能够恰好经过这些数据点。它可以用于插值,即根据给定的离散数据点推断出未知函数在其它点上的取值。拉格朗日插值法的优点是计算简单,容易理解和实现…

从初级软件测试,到高级软件测试的必经之路

作为软件质量控制中的重要一环,软件测试工程师基本处于"双高"地位,即:地位高、待遇高,而随着软件测试行业等级越来越专业化,软件测试工程师也随即被分为不同的等级,即:初级测试工程师…

《SQUID: Deep Feature In-Painting for Unsupervised Anomaly Detection》论文阅读理解

《SQUID: Deep Feature In-Painting for Unsupervised Anomaly Detection》论文阅读理解 领域:用于医学图像的异常检测 论文地址:SQUID: Deep Feature In-Painting for Unsupervised Anomaly Detection 目录 《SQUID: Deep Feature In-Painting for Un…

5月19号软件资讯更新合集.....

ohUrlShortener 短链接系统 v2.0 发布 | 指定「打开方式」功能支持 距上一次更新版本差不多两个月,ohUrlShortener 短链接系统与昨天晚上正式发布 v2.0 版本 这个版本主要的变化: 启动性能优化:在短链接数量持续上升之后,启动系…

Halcon 算子 select_shape_std 和 select_shape_xld区别

文章目录 1 select_shape_std 算子介绍2 select_shape_xld算子介绍3 select_shape_std 和 select_shape_xld区别4 Halcon 算子的特征 Features 列表介绍1 select_shape_std 算子介绍 select_shape_std (Operator) Name select_shape_std — Select regions of a given shape.Si…

JavaWeb14 - 数据交换 - 01 - JSON

1. 概述 1.1 官方文档 Json 在线文档:https://www.w3school.com.cn/js/js_json_intro.asp 1.2 JSON 介绍 JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)JSON 是轻量级的文本数据交换格式【老师解读】 JSON 独立于语言 …

Cloud Studio 内核升级之专注体验

前言 Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能使用。云端开发体验与本地几乎一样,上手门槛更低&#…

使用Python实现Rest API指南

在今天的数字化世界中,数据的获取、交换和使用已经成为几乎所有行业的核心部分。无论您正在为一个大型公司设计复杂的软件系统,还是只是为了个人项目尝试获得一些公开的数据,理解和利 用API——尤其是RESTful API——都是一项至关重要的技术。…

一道php反序列化题的pop链构造

题目地址为&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场 点击进入如下题 题目代码如下&#xff0c;其中像套娃一样&#xff0c;多次对魔术方法进行调用&#xff0c;挺烧脑。根据题目&#xff0c;显然目标是echo $flag <?php //flag is in flag.php erro…

Flask send_file函数导致的绝对路径遍历

平时接触到的 python 项目并不多&#xff0c;对 python 的代码审计更是没有接触&#xff0c;偶然朋友发来了一个漏洞 Flask send_file函数导致的绝对路径遍历 &#xff0c;感觉打开了新世界的大门&#xff0c;于是就以一个初学者的角度&#xff0c;进行复现分析一下。详情也可以…

算法:回溯算法套路总结

目录 1、回溯算法最初的模板 2、收获节点包括剪枝、去重等操作需要在模板上加上什么东西 2.1 收获的是否为叶子节点 2.1.1 收获的是叶子节点的数据 2.1.2 收获的节点不是叶子节点的数据 2.2 能否重复选取数据 2.2.1 不能重复选取数据 2.2.2 可以重复选取数据 2.3 剪枝…