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

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

首先看看效果

左边是本地测试环境,右边是打包后的生产环境,写这个环境变量的好处就是,你在本地开发的时候变量随便改,不会影响生产环境,只要你不去改生产环境的文件就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.mzph.cn/news/141480.shtml

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

相关文章

07【保姆级】-GO语言的程序流程控制【if switch for while 】

之前我学过C、Java、Python语言时总结的经验: 先建立整体框架,然后再去抠细节。先Know how,然后know why。先做出来,然后再去一点点研究,才会事半功倍。适当的囫囵吞枣。因为死抠某个知识点很浪费时间的。对于GO语言&a…

2024 款:最新前端技术趋势

Hello,大家好,我是 Sunday。 上一次的时候聊了 那么些已经落后的前端开发技术 。但是光知道什么技术落后了是不够的,咱们还得知道 前端最新的技术趋势是什么。所以,今天这篇文章,咱们就来聊一聊,2023 最新…

Spring后端HttpClient实现微信小程序登录

这是微信官方提供的时序图。我们需要关注的是前后端的交互,以及服务端如何收发网络请求。 小程序端 封装基本网络请求 我们先封装一个基本的网络请求。 const baseUrl"localhost:8080" export default{sendRequsetAsync } /* e url:目标页…

对比国内主流开源 SQL 审核平台 Yearning vs Archery

Yearning, Archery 和 Bytebase 是目前国内最主流的三个开源 SQL 审核平台。其中 Yearning 和 Archery 是社区性质的项目,而 Bytebase 则是商业化产品。通常调研 Bytebase 的用户也会同时比较 Yearning 和 Archery。 下面我们就来展开对比一下 Yearning 和 Archery…

DRAM和SRAM

特点 Static Random Access Memory:速度快、存储一位需要元器件更多、功耗较大、集成度低、更贵 Dynamic Random Access Memory:容量大、需刷新、附属电路更复杂、功耗较小、集成度高 存储位元 SRAM DRAM 逻辑结构 SRAM 典型的SRAM芯片有6116&am…

Layer 2 真的为以太坊扩容了吗?

构建一个安全、对用户友好的去中心化网络的愿景,依赖于关键基础设施的发展。这个愿景由一个共享的经济框架支持,得到了亿万人的拥护。Layer 2 的扩展解决方案在构建这一基础和增强以太坊的能力方面起着至关重要的作用。这些项目相互协作,形成…

数据结构—数组栈的实现

前言:各位小伙伴们我们前面已经学习了带头双向循环链表,数据结构中还有一些特殊的线性表,如栈和队列,那么我们今天就来实现数组栈。 目录: 一、 栈的概念 二、 栈的实现 三、 代码测试 栈的概念: 栈的概念…

【PG】PostgreSQL 预写日志(WAL)、checkpoint、LSN

目录 预写式日志(WAL) WAL概念 WAL的作用 WAL日志存放路径 WAL日志文件数量 WAL日志文件存储形式 WAL日志文件命名 WAL内容 检查点(checkpoint) 1 检查点概念 2 检查点作用 触发检查点 触发检查点之后数据库操作 设置合…

数据结构之队列

目录 引言 队列的概念与结构 队列的实现 定义 初始化 销毁 入队 判断队列是否为空 出队 获取队头元素 获取队尾元素 检测队列中有效元素个数 元素访问 源代码 queue.h queue.c test.c 引言 数据结构之路经过栈后,就来到了与栈联系紧密的兄弟—…

RabbitMq防止消息丢失

RabbitMq防止消息丢失 消息的传递路径出现消息丢失的位置解决 消息的传递路径 消息发送方 --> MQ --> 消息消费方 出现消息丢失的位置 消息发送方: 消息传输过程中丢失MQ: MQ收到消息后,存在内存中,还未被消费就宕机了,导致数据丢失消息消费方: 消息到达消费方后, 服务…

Docker安装详细步骤及相关环境安装配置(mysql、jdk、redis、自己的私有仓库Gitlab 、C和C++环境以及Nginx服务代理)

目录 一、从空白系统中克隆Centos7系统 二、使用xshell连接docker_tigerhhzz虚拟机​编辑 三、在CentOS7基础上安装Docker容器 四、在Docker中进行安装Portainer 4.1、在Docker中安装MySQL 4.2、在Docker中安装JDK8,安装Java环境 4.3、Docker安装redis&#…

Maya v2024(3D动画制作软件)

Maya 2024是一款三维计算机图形动画制作软件。它被广泛应用于电影、电视、游戏、动画等领域中,用于创建各种三维模型、场景、特效和动画。 以下是Maya的主要特点: 强大的建模工具:Maya提供了各种建模工具,如多边形建模、NURBS建模…

时序数据库 TDengine + 高级分析软件 Seeq,助力企业挖掘时序数据潜力

作为一款制造业和工业互联网(IIOT)高级分析软件,Seeq 支持在工艺制造组织中使用机器学习创新的新功能。这些功能使组织能够将自己或第三方机器学习算法部署到前线流程工程师和主题专家使用的高级分析应用程序,从而使单个数据科学家…

20.有效的括号(LeetCode)

思路:用栈的后进先出的特性,来完成题目的要求 因为C有库,可以直接用,而C语言没有,所以我们直接把写好的栈拷贝上来用。 首先,完成框架的搭建 其次,再实现循环内的部分。1.左括号入栈 2.右括…

react函数式组件props形式子向父传参

父组件中定义 子组件中触发回调传值 import { useState } from "react"; function Son(params) {const [count, setCount] useState(0);function handleClick() {console.log(params, paramsparamsparamsparamsparamsparams);params.onClick(111)setCount(count 1…

Rust-使用dotenvy加载和使用环境变量

系统的开发,测试和部署离不开环境变量,今天分享在Rust的系统开发中,使用dotenvy来读取和使用环境变量。 安装 cargo add dotenvy dotenv_codegen 加载环境变量 use dotenvy::dotenv;fn main() {dotenv().expect(".env不存在");…

TensorFlow学习笔记--(3)张量的常用运算函数

损失函数及求偏导 通过 tf.GradientTape 函数来指定损失函数的变量以及表达式 最后通过 gradient(%损失函数%,%偏导对象%) 来获取求偏导的结果 独热编码 给出一组特征值 来对图像进行分类 可以用独热编码 0的概率是第0种 1的概率是第1种 0的概率是第二种 tf.one_hot(%某标签…

Python高级语法----使用Python进行模式匹配与元组解包

文章目录 1. 模式匹配的新特性2. 高级元组解包技巧3. 数据类的匹配与应用1. 模式匹配的新特性 Python自3.10版本起引入了结构化模式匹配的新特性,这是一种强大的工具,允许开发者用更清晰、更直观的方式处理数据结构。模式匹配类似于其他编程语言中的switch-case语句,但它更…

Kubernetes介绍

Kubernetes介绍 1.应用部署方式演变 在部署应用程序的方式上,主要经历了三个时代: 传统部署:互联网早期,会直接将应用程序部署在物理机上 优点:简单,不需要其它技术的参与 缺点:不能为应用程序…