vue2+webpack 和 vite+vue3 配置获取环境变量(补充)

  • 相关涉及知识点可看小编该文章:

nginx: 部署前端项目的详细步骤(vue项目build打包+nginx部署)_前端工程打包部署到nginx-CSDN博客

1.vue2+webpack

我们通常会在项目中看到这么两个文件(没有则自己创建,文件名:.env.***) ,一个是生产环境,一个是测试环境。

  • 然后可以通过下面的方法在页面中获取响应的环境变量,并后续做判断:
process.env.*** // 用法
//例如
process.env.NODE_ENV
process.env.VUE_APP_DES
process.env.VUE_APP_KEY
……
  • 两个文件的内容:

  • 通常放的都是对应环境的环境变量
  • 注意写法:VUE_***

2.vite+vue3

  • 配置内容和webpack+vue2差不多;
  • 注意:
  1. 就是配置文件中的变量不能随便命名,必须以VITE_开头
  2. 就是获取的方式使用:import.meta.env.VITE_***可以输出对应的值
  • 获取方式:

import.meta.env.VITE_ENV
import.meta.env.VITE_DES
……

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

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

相关文章

C#回车按下时 如果当前焦点的下个控件为Button 则按Button。 如果不是Button则焦点移到下个控件上

需求 扫SN 扫IMEI 扫其它 就自动点打印 帮我写这个C# 函数 “ private void FormF360ColorBox_KeyDown(object sender, KeyEventArgs e)” 回车按下时 如果当前焦点的下个控件为Button 则按Button。 如果不是Button则焦点移到下个控件上。 控件的Index 顺序要设对哦。 你可以…

AI大模型战争:通用与垂直,谁将领跑未来?

文章目录 📑引言一、通用大模型:广泛适用,实力不容小觑1.1 强大的泛化能力1.2 广泛的适用场景 二、垂直大模型:专注深度,精准解决问题2.1 深度专注,精准度高2.2 快速落地与普及 三、通用与垂直:…

通过焦点行事件对行值抓取改变当行状态值

我们在实际开发过程中,对于每一行的状态值需要有单独的变换,通过对特定值的判断我们可以改变其状态值,通过状态值的不同,允许用户进行不同的操作,本文状态值以审核为例,通过对AuditState列的判断&#xff0…

新建的springboot项目启动报错:找不到或无法加载主类

检查编译问题 在使用Spring Boot时,我们通常使用Maven或Gradle进行项目的构建和编译。如果在编译过程中出现了错误,可能会导致无法加载主类的问题。 在使用Maven时,可以尝试使用 mvn clean install 命令清理并重新构建项目。 如果使用Grad…

qt开发-12_QScrollArea

在 Qt 中,QScrollArea 是用于显示可以滚动内容的控件,通常用于处理视图中内容超出可见区域的情况。它提供了一种在有限的视窗内显示大量内容的解决方案,如显示大图像、长文本、多个小部件等。 常用方法和属性 setWidget(QWidget *widget)&am…

泰勒斯威夫特2022年纽约大学毕业典礼演讲:NYU‘s 2022 Commencement Speaker Taylor Swift

NYU’s 2022 Commencement Speaker Taylor Swift Link: https://www.youtube.com/watch?vOBG50aoUwlI Singer, songwriter, producer, and director Taylor Swift received a Doctor of Fine Arts, honoris causa, at the Commencement for the Class of 2022 and delivered …

RecyclerVIew->加速再减速的RecyclerVIew平滑对齐工具类SnapHelper

XML文件 ItemView的XML文件R.layout.shape_item_view <?xml version"1.0" encoding"utf-8"?> <FrameLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"100dp"android:layout_heig…

一加12搞机(kernelsu+lsposed)

刷机 温馨提示&#xff1a;如果你不知道root的意义在哪&#xff0c;建议不要解锁和root&#xff0c;到时候救砖或者回锁都挺麻烦。 刷全量包 最新版的系统没有更新推送&#xff0c;所以去一加社区[0]找了个全量包来刷&#xff0c;。安装方式可以看帖子里的内容&#xff0c;说…

力扣-滑动窗口

文章目录 滑动窗口题目1-无重复字符的最长子串题目2-找到字符串中所有字母异位词 滑动窗口 滑动窗口是一种常用的算法技巧&#xff0c;适用于需要在一个数组或字符串中找出满足特定条件的连续子数组或子字符串的问题。它通过维护一个窗口范围来减少重复计算&#xff0c;从而优…

零基础STM32单片机编程入门(一)初识STM32单片机

文章目录 一.概要二.单片机型号命名规则三.STM32F103系统架构四.STM32F103C8T6单片机启动流程五.STM32F103C8T6单片机主要外设资源六.编程过程中芯片数据手册的作用1.单片机外设资源情况2.STM32单片机内部框图3.STM32单片机管脚图4.STM32单片机每个管脚可配功能5.单片机功耗数据…

金融行业专题|某头部期货基于 K8s 原生存储构建自服务数据库云平台

为了进一步提升资源交付效率&#xff0c;不少用户都将数据库应用从物理环境迁移到容器环境。而对于 Kubernetes 部署环境&#xff0c;用户不仅需要考虑数据库在性能方面的需求&#xff0c;还要为数据存储提供更安全、可靠的高可用保障。 近期&#xff0c;某头部期货机构基于 S…

PaddleOCR C++源码编译以及demo测试

Windows10下使用PaddleOCRc 1.所需要的环境 PaddleOCR 源码文件&#xff1a;https://gitee.com/paddlepaddle/PaddleOCR &#xff08;本文选择2.6https://github.com/PaddlePaddle/PaddleOCR/archive/refs/tags/v2.6.0.zip&#xff09; opencv库&#xff1a;https://opencv…

PyTorch的环境配置和安装

PyTorch环境配置及安装 初步机器学习&#xff0c;这里记录下一些学习经过&#xff0c;之后以便于自己查看&#xff0c;同时欢迎各位大佬点评&#xff0c;本节是机器计算的一个包的安装和简单验证。 安装、使用环境 Windows环境下&#xff1a;CUDA官网使用IDM下载就很快乐&am…

LeetCode11. 盛最多水的容器题解

LeetCode11. 盛最多水的容器题解 题目链接&#xff1a; https://leetcode.cn/problems/container-with-most-water 示例 思路 暴力解法 定住一个柱子不动&#xff0c;然后用其他柱子与其围住面积&#xff0c;取最大值。 代码如下&#xff1a; public int maxArea1(int[]…

AI儿童绘本创作

之前分享过AI儿童绘画的项目&#xff0c;但是主要问题是角色一致要花费很长的时间&#xff01; 今天发现了这款&#xff0c;非常奈斯&#xff01; 只需输入故事主题、风格、模板&#xff0c;软件就会自动创作故事内容&#xff0c;自动生成插画配图&#xff0c;自动根据模板生…

Spring Bean自动装配:深入解析与实战应用

何为自动装配 在使用Spring框架配置bean时&#xff0c;我们通常需要为bean的属性设置值。如果不手动设置这些值&#xff0c;它们通常会被初始化为默认值&#xff08;对于对象类型通常是null&#xff0c;对于基本类型如int则是0&#xff0c;boolean是false等&#xff09;。自动…

(超详细)YOLOV7改进-Soft-NMS(支持多种IoU变种选择)

1.在until/general.py文件最后加上下面代码 2.在general.py里面找到这代码&#xff0c;修改这两个地方 3.之后直接运行即可

网页设计软件Bootstrap Studio6.7.1

Bootstrap Studio是一个适用于Windows的程序,允许您使用流行的fre***orca Bootstrap创建和原型网站。您可以将现成的组件拖动到工作区并直观地自定义它们。该程序生成干净和语义的PDF、CSS和JS代码,所有Web浏览器都支持这些代码。 Bootstrap Studio有一个漂亮而强大的界面,它…

DataWorks重磅推出全新资源组2.0,实现低成本灵活付费和动态平滑扩缩容

背景简介 DataWorks资源组为DataWorks上的各个功能模块提供计算资源&#xff0c;属于付费服务。 资源组属于DataWorks的基础组件&#xff0c;是客户正常使用DataWorks的前提。 资源组直接影响到相关功能是否正常运行&#xff0c;以及运行的效率和稳定性。 此前DataWorks资源…

ImportError: attempted relative import beyond top-level package报错,解决方法

1.如下图所示&#xff0c;在conftest.py页面采用相对路径去引用包&#xff0c;运行提示报错信息 目录结构: D:. ├─common ├─config ├─image ├─logFile ├─page │ └─basePage.py └─test_cases└─conftest.py从目录结构中我们可以看到conftest.py文件和basePage…