vue3配置环境变量,小白简单易学

news2024/11/24 5:38:28

环境变量的意义就是防止我们更新打包的时候写错变量,合并代码这些一系列问题

首先看看效果

左边是本地测试环境,右边是打包后的生产环境,写这个环境变量的好处就是,你在本地开发的时候变量随便改,不会影响生产环境,只要你不去改生产环境的文件就ok

好了,下面小白按照下面的来,非常简单

第一步创建一个.env.development这是本地开发环境

设置对应的变量,注意要用VUE_APP开头

VUE_APP_ENV=development
VUE_APP_API_URL=http://localhost:3000

第二步创建.env.production生产环境变量

VUE_APP_ENV=production
VUE_APP_API_URL=https://api.xxxxx.com

这里创建好了之后最后配置一下package.json就ok了

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build ",
    "lint": "vue-cli-service lint"
  }

最后你运行一下跑一下看一下输出就可以了

created() {
		console.log('当前环境:',process.env.VUE_APP_API_URL)
	},

非常简单,有问题滴滴我

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

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

相关文章

“大学生”返乡投身乡村建设,直播电商成为返乡创业新潮流!

数字乡村建设是新时代乡村振兴的必经之路,它是伴随网络化、信息化和数字化在农业农村经济社会发展中的应用,以及农民现代信息技能的提高而内生的农业农村现代化发展和转型进程,既是乡村振兴的战略方向,也是建设数字中国的重要内容…

基于DBO算法的WSN节点覆盖优化

先做一个声明:文章是由我的个人公众号中的推送直接复制粘贴而来,因此对智能优化算法感兴趣的朋友,可关注我的个人公众号:启发式算法讨论。我会不定期在公众号里分享不同的智能优化算法,经典的,或者是近几年…

C++编程爬虫代码全过程分享

以下是使用C编写一个爬虫程序的基本步骤和代码示例&#xff1a; 1、首先&#xff0c;我们需要包含必要的库文件。在这个例子中&#xff0c;我们将使用<iostream>、<string>和<curlpp/cURLpp.hpp>库。 #include <iostream> #include <string> #i…

shell 语法介绍

大家好&#xff0c;我是蓝胖子&#xff0c;在日常开发中或多或少都会接触到shell脚本&#xff0c;可以说会shell脚本是一位后端开发的基本功&#xff0c;今天我将会花上一篇文章总结下常见的shell的语法&#xff0c;学完本篇&#xff0c;相信简单的shell脚本就能够看懂了&#…

世微 降压恒流 12V 5A 一切一双灯 LED汽车大灯驱动方案 AP5191

AP5191是一款PWM工作模式,高效率、外围简 单、内置功率MOS管&#xff0c;适用于4.5-150V输入的高 精度降压LED恒流驱动芯片。输出功率150W&#xff0c; 电流6A。 AP5191可实现线性调光和PWM调光&#xff0c;线性调 光脚有效电压范围0.55-2.6V. AP5191 工作频率可以通过RT 外部…

想要检测TikTok网络是否安全?这五个网站请收好

Tiktok目前在海外大火&#xff0c;越来越多的人想要进入TikTok的海外市场并捞一桶金。然而&#xff0c;成功并非易事。想要在TikTok中立足&#xff0c;我们必须保证我们的设备、网络环境和网络节点完全符合官方的要求&#xff0c;并且没有任何异常或风险。那么我们该如何设置、…

MAC地址注册的原理和应用

MAC地址注册是指在网络设备中&#xff0c;将设备的物理地址&#xff08;即MAC地址&#xff09;与设备的IP地址进行关联和注册的过程。MAC地址是以太网卡硬件上的独特标识符&#xff0c;用于在局域网中标识网络设备。 MAC地址注册在网络管理中起到重要作用&#xff0c;它可以帮助…

Python 框架学习 Django篇 (十) Redis 缓存

开发服务器系统的时候&#xff0c;程序的性能是至关重要的。经过我们前面框架的学习&#xff0c;得知一个请求的处理基本分为接受http请求、数据库处理、返回json数据&#xff0c;而这3个部分中就属链接数据库请求的响应速度最慢&#xff0c;因为数据库操作涉及到数据库服务处理…

2011年12月21日 Go生态洞察:了解Go社区

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

无人地磅称重系统|自助过磅 料仓联动 自助卸料

上海思伟无人地磅系统 自助过磅、 自助卸料 、料仓联动 智能、省人、安全 无人监管过磅 对地磅及其相关的所有硬件进行配置和管理&#xff1b; 支持红外、道闸、车牌识别、AI分析、拍照存档、LED语音播报一体机等设备&#xff1b; 实现稳定可靠的无人监管称重功能&#xf…

软件测试之蚂蚁金服面试题,含答案

对于想要去面试的小伙伴们看过来&#xff0c;小编为大家总结了蚂蚁的面试题&#xff0c;其实很多面试题很多公司都差不多。主要看自己如何灵活回答&#xff0c;大家可以灵活回应。希望对大家有所帮助。 一&#xff1a;基础部分&#xff1a; Q1. 什么是软件测试&#xff1f; 答…

rhcsa-权限

文件目录 r 读取权限 可以列出目录下的文件 w 修改权限 可以进行创建和删除等操作 x 执行权限 能进入到该目录/切换到该目录 - 没有权限 没有权限 chmod change mod 作用&#xff1a;修改文件或目录的权限 语法&…

远程办公方案

员工通过传统的VPN登录或端口映射方式从互联网访问内网应用存在诸多的安全及体验不佳等问题&#xff0c; 通过身份云基于零信任网络架构的应用网关&#xff0c;可以完全替换传统的vpn方案&#xff0c;让您的员工随时随地安全、便捷、高效访问内网应用。 企业面临的挑战 企业出…

圆形承重钢管用在线直线度测量仪实时检测品质!

关于直线度尺寸的检测&#xff0c;相信你听说过很多诸如直线法、直尺法、激光准直法等的离线检测方式&#xff0c;那你听说过在线直线度测量仪吗&#xff1f;它是可安装在产线上进行实时在线检测的设备。本文就跟随小编一起来简单的了解一下。 在线直线度测量仪的测量方法 直…

SDL2 加载图片

1.简介 在SDL中&#xff0c;本身只支持加载BMP格式的图片SDL_LoadBMP&#xff0c;如果想要加载别的格式图片&#xff0c;需要编译SDL_image库。 SDL_image库中IMG_Load和都是IMG_LoadTexture用于加载图片的函数&#xff0c;但是它们的使用方式和返回值有所不同。 IMG_Load和…

ChIP在植物领域中的应用

01 什么是ChIP&#xff1f; 染色质免疫共沉淀技术&#xff08;Chromatin Immunoprecipitation assay&#xff0c;ChIP&#xff09;是研究体内DNA与蛋白质相互作用的方法。其基本原理是在细胞生理状态下固定蛋白质-DNA复合物&#xff0c;将其随机打断为一定长度范围内的染色质小…

腾讯云优惠券如何领取?腾讯云服务器怎么买便宜?

腾讯云深知用户对价格的重视&#xff0c;因此在每年的618、双11、双12等大型促销活动中推出了大量优惠活动。这些优惠活动包括打折、满减、买赠等形式&#xff0c;让用户在购买腾讯云主机服务器时能够享受到更多的实惠。特别是在这些促销活动期间&#xff0c;用户可以通过领取优…

虚拟人高清视频渲染宝藏工具:RenderHare飞兔渲染软件

在数字时代&#xff0c;品牌为了抢占年轻人群体&#xff0c;纷纷涌入虚拟人IP赛道&#xff0c;通过虚拟人IP运营模式&#xff0c;构建独特的虚拟人IP记忆符号&#xff0c;向粉丝输出品牌潮流、年轻化的价值观&#xff0c;扩散虚拟IP影响力&#xff0c;让品牌真正与消费者玩在一…

WampServer下载安装并结合内网穿透实现本地服务的公网访问

文章目录 前言1.WampServer下载安装2.WampServer启动3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c;…

智慧城市井盖选择,智能井盖传感器特点介绍

在不断发展的智慧城市技术领域&#xff0c;创新的过程一直是永无止境的。 顺应科学技术的发展潮流&#xff0c;一项惠民的举措正在悄然改变人们的生活。智能井盖传感器看似是不起眼的设备&#xff0c;但是它们就在我们脚下&#xff0c;正在悄无声息的完善城市基础设施和城市生命…