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

news2024/11/17 21:35:46

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

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.coloradmin.cn/o/1857290.html

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

相关文章

热腾腾的,仓颉cangjie和C#的初战

花了一个下午快速浏览了一下仓颉(Cangjie)的文档。总体感觉,仓颉把现代编程语言的各种特征都融合在一起,称它为“缝合怪”一点都不夸张。没有历史包袱的确让它看起来很爽。由于目前还无法实际试用它,所以编译和运行性能…

Apache Doris 基础 -- 视图和物化视图

1、视图 视图(逻辑视图,logical views)是封装了一个或多个SELECT语句的存储查询(stored queries)。视图在执行时动态访问和计算数据库数据。视图是只读的,可以引用任何表和其他视图的组合。 视图可用于以下目的: 通过对用户隐藏…

全行业通用商城小程序源码

一站式购物新体验 一、引言:开启数字化购物新时代 在数字化快速发展的今天,小程序成为了商家们连接消费者的重要桥梁。特别是“全行业通用商城小程序”,以其便捷的购物体验和多样化的功能,成为了越来越多商家和消费者的首选。本…

mabl:AI原生测试自动化平台的基础使用

mabl:AI原生测试自动化平台的基础使用 简介注册登录安装基本使用创建第一个浏览器测试 Mabl的AI驱动测试能力自动化测试开发与维护异常监测与根源分析高级分析与报告自适应测试执行跨平台兼容性测试 简介 mabl 是一个基于人工智能和机器学习的云原生测试自动化平台…

学习记录之数学表达式(5)

文章目录 十、线性回归10.1 示例10.2 拟合10.3 推导10.4 岭回归10.5 作业 十一、Logistic回归11.1 分割超平面11.2 点到直线的距离11.3 sigmoid函数11.4 优化目标11.5 求解11.6 作业 十、线性回归 线性回归是一个常用的机器学习算法; 10.1 示例 表 1.单变量的股价预…

推荐一款好用的浏览器翻译插件——欧路翻译

近些年,机器翻译的效果越来越好,于是也有更多的开发者,开发了免费使用的浏览器翻译插件。这大大的帮助了我们查看国外的网站,有利于大家获取更多的信息。 在此,给大家推荐一款免费好用的浏览器插件——欧路翻译。支持…

百元左右蓝牙耳机的牌子有哪些?盘点性价比最高的百元机推荐

随着智能手机的普及,蓝牙耳机以其便携性和灵活性逐渐成为人们日常生活不可或缺的配件。尤其是百元左右的蓝牙耳机,因其价格亲民且功能齐全,深受广大消费者的青睐。无论是通勤途中隔绝嘈杂,还是运动时候的动感伴侣,或是…

GPT-5:AI新时代的曙光与我们的准备

一、引言:GPT-5的即将来临 随着科技的飞速发展,人工智能领域正迎来一场前所未有的变革。OpenAI再次引领了这场变革的浪潮,即将发布的GPT-5无疑将成为AI领域的一颗璀璨明星。从GPT-4到GPT-5,每一次的迭代都代表着AI技术的巨大飞跃…

[保姆级教程]在uniapp中使用vant框架

文章目录 导文安装 Vant在uniapp项目中的pages.json中配置easycom,实现组件的自动按需引入:在页面中使用Vant Weapp组件,例如使用按钮组件(Button):其他安装报错官网地址 导文 在 uni-app 中使用 Vant 框架…

使用 GitHub Actions 编译和发布 Android APK

使用 GitHub Actions 编译和发布 Android APK 在现代软件开发中,持续集成和持续部署(CI/CD)已成为不可或缺的一部分。对于 Android 开发者来说,自动化编译和发布 APK 不仅节省时间,还能确保每次发布的一致性。本文将介…

人工智能大模型走向“百花齐放”

前言 去年以来,人工智能大模型浪潮持续涌动。国内外一大批创新企业和高校院所加大研究力度,纷纷推出各自的大模型产品,尤其国产大模型取得了长足进步,大量高质量模型百花齐放,助力中国成为全球人工智能发展的领头羊之…

cmake或vcpkg安装opencv-contrib中遇到raw.githubusercontent.com下载文件失败的错误记录

问题总结:你的网络无法正常在raw.githubusercontent.com网站中下载文件 问题解决:将你的梯子切换为全局的美国节点(香港、日本等均不可行) 问题记录—— cmake: 我在opencv_code中放置了opencv和opencv-contrib的sou…

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

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

Hi3861 OpenHarmony嵌入式应用入门--LiteOS Event

CMSIS 2.0接口使用事件标志是实时操作系统(RTOS)中一种重要的同步机制。事件标志是一种轻量级的同步原语,用于任务间或中断服务程序(ISR)之间的通信。 每个事件标志对象可以包含多个标志位,通常最多为31个&…

LabVIEW高精度电能质量监测系统

LabVIEW和研华采集卡的高精度电能质量监测系统利用虚拟仪器技术,实时监测电能质量的关键指标,如三相电压、频率和谐波。通过提高监测精度和效率,改善电网的电能质量。系 一、系统背景 电能作为现代社会的关键能源,其质量直接影响…

MySQl配置环境变量

配置环境变量 (a)添加一个系统变量,变量名:CATALINA-HOME,变量值:MySql在自己电脑当中的安装路径,注意:5.7版本需要配置的路径是MySQL.Sever5.7的文件夹路径。 (b)在Path变量的结尾添加一个英文分号,之后把上面添加的路径导入进去(%CATALINA-HOME%)在这个结尾处添加\bin. (2)登…

Python爬虫项目集:豆瓣电影排行榜top250

关于整理日常练习的一些爬虫小练习,可用作学习使用。 爬取项目以学习为主,尽可能使用更多的模块进行练习,而不是最优解。 爬虫概要 示例python 库爬取模块request解析模块BeautifulSoup存储类型list(方便存入数据库&#xff09…

GPT+网络安全,新时代风口如何把握?

GPT-5 一年半后发布?对此你有何期待? 前言 IT之家6月22日消息,在美国达特茅斯工程学院周四公布的采访中,OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布,给出了肯定答案并表示将在一年半后发布。此外&#…

应用图扑 HT for Web 搭建拓扑关系图

拓扑结构在计算机网络设计和通信领域中非常重要,因为它描述了网络中的设备(即“点”)如何相互连接(即通过“线”)。这种结构不仅涉及物理布局,即物理拓扑,还可以涉及逻辑或虚拟的连接方式&#…

iOS Swift5 视频播放

文章目录 1.截图2.代码3.导入本地文件 1.截图 2.代码 import UIKit import AVKit import AVFoundationclass ViewController: UIViewController {override func viewDidLoad() {super.viewDidLoad()view.backgroundColor .white// 创建按钮let button UIButton(type: .syste…