【Vue3】env环境变量的配置和使用(区分cli和vite)

原文作者:我辈李想
版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。


文章目录

  • 前言
  • 一、env文件
  • 二、vue3+cli加载env
    • 1..env配置
    • 2..dev配置(其他环境参考)
    • 3.package.json文件
    • 4.使用
  • 三、vue3+vite加载env
    • 1..env配置
    • 2..dev配置(其他环境参考)
    • 3.package.json文件
    • 4.使用


前言

目前vue程序可以通过cli和vite两种方式构建,但是两种方式加载env的方式有些不同,这里基于自己的理解简单记录。


一、env文件

通过我们会在项目的根目录下创建.env文件,通常包括.env、.env.dev、.env.pro、.env.test,这里的env文件跟后边的动态加载有关。
在这里插入图片描述

二、vue3+cli加载env

1…env配置

通过cli加载env,配置中名字需要以VUE_APP开头

VUE_APP_PORT = 8000

2…dev配置(其他环境参考)

VUE_APP_BASE_URL_API="http://127.0.0.1:8000/api/"
VUE_APP_ENV = 'development'

3.package.json文件

{"name": "ruleVue","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve --mode dev","build": "vue-cli-service build --mode pro","lint": "vue-cli-service lint --mode test"},...
}

4.使用

在这里插入图片描述

三、vue3+vite加载env

1…env配置

通过cli加载env,配置中名字需要以VITE_开头

VITE_PORT = 8000

2…dev配置(其他环境参考)

VITE_BASE_URL_API="http://127.0.0.1:8000/api/"
VITE_ENV = 'development'

3.package.json文件

	"scripts": {"dev": "vite --mode dev","pro": "vite --mode pro","build:dev": "vite build --mode dev","build:pro": "vite build --mode pro","preview": "vite preview"},...

4.使用

import.meta.env.VITE_API_URL

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

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

相关文章

【html5】03-新表单元素及属性

目录 1 引言 2 智能表单控件-type 3 表单属性 form input 5 答疑--解决required自定义提示信息 1 引言 HTML5引入了一系列新的表单输入类型,如email、url、number、range、date、time、datetime-local、month、week、search、color和tel等。这些新类型增强了表…

FFmpeg源码:bytestream_get_byte函数解析

一、引言 FFmpeg源码中经常使用到bytestream_get_byte这个函数,比如使用FFmpeg对BMP图片进行解析,其源码会调用函数bmp_decode_frame,而该函数内部会通过bytestream_get_byte读取BMP 的header。本文讲解函数bytestream_get_byte的作用和内部…

Spark SQL 中DataFrame DSL的使用

在上一篇文章中已经大致说明了DataFrame APi,下面我们具体介绍DataFrame DSL的使用。DataFrame DSL是一种命令式编写Spark SQL的方式,使用的是一种类sql的风格语法。 文章链接: 一、单词统计案例引入 import org.apache.spark.sql.{DataFrame, SaveMod…

Xinstall助力实现App间直接跳转,提升用户体验

在移动互联网时代,App已成为我们日常生活中不可或缺的一部分。然而,在使用各类App时,我们经常会遇到需要在不同App之间切换的情况,这时如果能够直接跳转,将会大大提升用户体验。而Xinstall正是这样一款能够帮助开发者实…

OpenCV 获取 RTSP 摄像头视频流保存至本地

介绍 Java OpenCV 是一个强大的开源计算机视觉库,它提供了丰富的图像处理和分析功能,越来越多的应用需要使用摄像头来获取实时视频流进行处理和分析。 在 Java 中使用 OpenCV 打开摄像头的基本步骤如下: 确保已经安装了OpenCV库使用 OpenC…

Raylib 绘制自定义字体的一种套路

Raylib 绘制自定义字体是真的难搞。我的需求是程序可以加载多种自定义字体,英文中文的都有。 我调试了很久成功了! 很有用的参考,建议先看一遍: 瞿华:raylib绘制中文内容 个人笔记|Raylib 的字体使用 - …

W801 实现获取天气情况

看了小安派(AiPi-Eyes 天气站)的源码,感觉用W801也可以实现。 一、部分源码 main.c #include "wm_include.h" #include "Lcd_Driver.h"void UserMain(void) {printf("\n user task \n");Lcd_Init();Lcd_Clea…

MySQL主从复制(五):读写分离

一主多从架构主要应用场景:读写分离。读写分离的主要目标是分摊主库的压力。 读写分离架构 读写分离架构一 架构一结构图: 这种结构模式下,一般会把数据库的连接信息放在客户端的连接层,由客户端主动做负载均衡。也就是说由客户…

RabbitMQ 消息队列安装及入门

市面常见消息队列中间件对比 技术名称吞吐量 /IO/并发时效性(类似延迟)消息到达时间可用性可靠性优势应用场景activemq万级高高高简单易学中小型企业、项目rabbitmq万级极高(微秒)高极高生态好(基本什么语言都支持&am…

leetcode124 二叉树中的最大路径和-dp

题目 二叉树中的 路径 被定义为一条节点序列,序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点,且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点 root &…

【Crypto】Rabbit

文章目录 一、Rabbit解题感悟 一、Rabbit 题目提示很明显是Rabbit加密,直接解 小小flag,拿下! 解题感悟 提示的太明显了

redis核心面试题二(实战优化)

文章目录 10. redis配置mysql实战优化[重要]11. redis之缓存击穿、缓存穿透、缓存雪崩12. redis实现分布式session 10. redis配置mysql实战优化[重要] // 最初实现OverrideTransactionalpublic Product createProduct(Product product) {productRepo.saveAndFlush(product);je…

MQTT 5.0 报文解析 05:DISCONNECT

欢迎阅读 MQTT 5.0 报文系列 的第五篇文章。在上一篇中,我们已经介绍了 MQTT 5.0 的 PINGREQ 和 PINGRESP 报文。现在,我们将介绍下一个控制报文:DISCONNECT。 在 MQTT 中,客户端和服务端可以在断开网络连接前向对端发送一个 DIS…

手把手教你搭建一个花店小程序商城

如果你是一位花店店主,想要为你的生意搭建一个精美的小程序商城,以下是你将遵循的五个步骤。 步骤1:登录乔拓云平台进入后台 首先,你需要登录乔拓云平台的后台管理页面。你可以在电脑或移动设备上的浏览器中输入乔拓云的官方网站…

2024.5.26 机器学习周报

目录 引言 Abstract 文献阅读 1、题目 2、引言 3、创新点 4、Motivation 5、naive Lite-HRNet 6、Lite-HRNet 7、实验 深度学习 解读SAM(Segment Anything Model) 1、SAM Task 2、SAM Model 2.1、Patch Embedding 2.2、Positiona Embedding 2.3、Transformer …

互联网医院开发:引领智慧医疗新时代

随着科技的迅猛发展和互联网的普及,传统医疗模式正在迎来一场深刻的变革。互联网医院的崛起,打破了时间和空间的限制,为患者和医疗机构带来了更加便捷、高效、安全的医疗服务体验。本文将从技术角度深入探讨互联网医院的开发,包括…

多线程(八)

一、wait和notify 等待 通知 机制 和join的用途类似,多个线程之间随机调度,引入 wait notify 就是为了能够从应用层面上,干预到多个不同线程代码的执行顺序.( 这里说的干预,不是影响系统的线程调度策略 内核里的线程调度,仍然是无序的. 相当于是在应用程序…

Pod容器资源限制和探针

目录 一、资源限制 1.Pod和容器的资源请求和限制 2.CPU 资源单位 案例一 案例二 二、健康检查,又称为探针(Probe) 1.探针的三种规则 2.Probe支持三种检查方法 3.探测获得的三种结果 案例一:exec 案例二:htt…

OneMO同行 心级服务:中移物联OneMO模组助力客户终端寒冷环境下的稳定运行

中移物联OneMO模组以客户为中心,基于中国移动心级服务要求,开展“OneMO同行 心级服务 标定一流”高标服务主题活动,升级“服务内容““服务方式”和“服务意识”,为行业客户提供全新的服务体验。 近日,某车载监控设备…

ACM实训第十七天

Is It A Tree? 问题 考试时应该做不出来,果断放弃 树是一种众所周知的数据结构,它要么是空的(null, void, nothing),要么是一个或的集合满足以下属性的节点之间有向边连接的节点较多。 •只有一个节点,称为根节点,它…