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.rhkb.cn/news/192074.html

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

相关文章

数字货币swap交易所逻辑系统开发分析方案

随着数字货币市场的快速发展, Swap交易所已成为一种重要的交易方式。本文将对数字货币Swap交易所逻辑系统开发进行分析,并探讨其优势、开发难点和解决方案。 一、数字货币Swap交易所逻辑系统开发的优势 数字货币Swap交易所是一种点对点的交易方式&#x…

【STM32/FreeRTOS】SysTick定时器及FreeRTOS系统节拍

目录 一、SysTick定时器 1、SysTick寄存器介绍 (1)控制及状态寄存器 (2)重装载数值寄存器 (3)当前数值寄存器 2、SysTick寄存器配置函数 二、FreeRTOS中的SysTick定时器 1、SysTick配置函数及分析 …

使用阿里云服务器学习Docker

首先我这里选择的系统服务器是CentOS 7.9 64位 因为centos系统里面的安装指令是:yum,而非apt-get. yum install docker -y试着建立一个容器: docker run -d -p 80:80 httpd启动docker的守护进程: sudo systemctl start docker 查看Docke…

【教3妹学编辑-mysql】mybatis查询条件遇到的坑及解决方案

2哥 :3妹,今天怎么下班这么晚啊。 3妹:嗨,别提了,今天线上出bug了, 排查了好久。 2哥:啊,什么问题呀? 3妹:我们内部的一个管理系统报错了, 最近排查下来是myb…

IDEA 使用Reset Current Branch to Here 进行git 版本控制,图文操作

文章目录 一、总结区别(只针对本地仓库操作)Soft详细解释文件版本冲突处理 Mixed详细解释Hard详细解释Keep详细解释文件版本冲突处理 二、其他Revert commit 参考文档 一、总结区别(只针对本地仓库操作) Soft详细解释 Soft操作只…

mysql之正则表达式匹配

题目: 今天在牛客网看到一道关于数据库正则表达式匹配的问题,发现自己一点不会做。 正则表达式: 一、正则表达式 MySQL 正则表达式通常是在检索数据库记录的时候,根据指定的匹配模式匹配记录中 符合要求的特殊字符串。MySQL 的…

【实例分割】用自己数据集复现经典论文YOLACT

YOLACT:You Only Look At CoefficienTs 🏆论文下载:paper 🏆代码下载:code 🏆论文详解:YOLACT 目录 🍂🍂1.安装环境 🍂🍂2.数据准备 &…

揭秘 DCNN——AlexNet

来源 — gifs.com 一、说明 还记得 2012 年的 ImageNet 视觉识别挑战赛吗?当然,你知道!经过大量的反复试验和实验,研究员 Alex Krizhevsky 及其合著者 Ilya Sutskever 和 Geoffrey E. Hinton(他真正理解了深度学习中…

【科研新手指南4】ChatGPT的prompt技巧 心得

ChatGPT的prompt心得 写在最前面chatgpt咒语1(感觉最好用的竟然是这个,简单方便快捷,不需要多轮对话)chatgpt思维链2(复杂任务更适用,简单任务把他弄复杂了)机理chatgpt完整咒语1(感…

Maven依赖管理项目构建工具的安装与配置

本篇来自尚硅谷的笔记,在线视频观看:Maven依赖管理项目构建工具,更多笔记欢迎访问:小熊学Java 一、Maven简介 1、为什么学习Maven 1.1、Maven是一个依赖管理工具 ①jar 包的规模 随着我们使用越来越多的框架,或者框…

微服务简单理解与快速搭建

分布式和微服务 含义 微服务架构 微服务架构风格是一种将一个单一应用程序开发为一组小型服务的方法,每个服务运行在自己的进程中,服务间通信采用轻量级通信机制(通常用HTTP资源API)。这些服务围绕业务能力构建并且可通过全自动部署机制独立部署。这些服…

消息队列简介

什么是消息队列?(Message queue,简称MQ) 从字面理解就是一个保存消息的一个容器。那么我们为何需要这样一个容器呢? 其实就是为了解耦各个系统,我们来举个例子: 有这么一个简单的场景,系统A负…

OpenAI调查ChatGPT故障;向量搜索的优势与局限

🦉 AI新闻 🚀 OpenAI调查ChatGPT故障,发布新AI产品GPTs和GPT-4 Turbo 摘要:OpenAI的ChatGPT和其他服务出现故障,经过调查后发现是由于DDoS攻击导致的异常流量模式。OpenAI在首届开发者大会上发布了新的AI产品GPTs&am…

基于入侵杂草算法优化概率神经网络PNN的分类预测 - 附代码

基于入侵杂草算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于入侵杂草算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于入侵杂草优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要:针对PNN神…

如何使用Cpolar+Tipask,在ubuntu系统上搭建一个私人问答网站

文章目录 前言2.Tipask网站搭建2.1 Tipask网站下载和安装2.2 Tipask网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道(云端设置)3.3 Cpolar稳定隧道(本地设置) 4. 公网访问测试5. 结语 前…

记忆科技携手中国电信,一站式存储打造坚实数字底座

11月10日,以“数字科技 焕新启航”为主题的2023数字科技生态大会在广州盛大开幕,本次大会由中国电信、广东省人民政府联合举办,是一场数字科技领域的年度盛会。忆联母公司记忆科技作为中国电信的合作伙伴之一受邀参会,深度参与了大…

刘家窑中医医院:鲁卫星主任团队走进社区,免费义诊送健康"

北京丰台刘家窑中医医院,前身为中国医学会航空医学会专家门诊,是一家医保单位,无需定点即可享受医保服务。这是一家集医疗、科研、预防、保健为一体的国家非营利性特色中医院。为了更好地服务社区群众,提高社区居民对健康的关注&a…

数据结构与算法(二)动态规划(Java)

目录 一、简介1.1 什么是动态规划?1.2 动态规划的两种形式1)自顶向下的备忘录法(记忆化搜索法)2)自底向上的动态规划3)两种方法对比 1.3 动态规划的 3 大步骤 二、小试牛刀:钢条切割2.1 题目描述…

Python开源项目RestoreFormer(++)——人脸重建(Face Restoration),模糊清晰、划痕修复及黑白上色的实践

有关 Python 和 Anaconda 及 RestoreFormer 运行环境的安装与设置请参阅: Python开源项目CodeFormer——人脸重建(Face Restoration),模糊清晰、划痕修复及黑白上色的实践https://blog.csdn.net/beijinghorn/article/details/134…

vscode设置vue3代码格式化

vscode设置vue3代码格式化 vscode设置vue3代码格式化 下载插件设置格式化时选用的插件实际使用 使用Prettier默认配置使用Prettier添加自定义配置使用Volar 完整配置文件参考链接 下载插件 可以使用Volar或Prettier 设置格式化时选用的插件 mac:【shift】【op…