Vue3中配置env环境变量

什么时候会用到这个呢,比如我们的后端开发有多名,很多时候需要切换调用不同人的接口地址,或者在打包的时候,需要指定环境中的后台接口地址,那么我们频繁修改代码,就很麻烦,这个时候,就可以提前编写好每个人或者每个后端对应的环境文件,启动的时候指定对应的文件即可

这里以开发环境和生产环境为例

  1. 首先定义两个env文件,格式为,.env.环境名,里边的内容格式为

# 变量必须以 VITE_ 为前缀才能暴露给外部读取

NODE_ENV = 'development'

VITE_APP_TITLE = '开发环境'

VITE_APP_BASE_API = '/dev-api'

VITE_SERVE = 'http://127.0.0.1'

 

     2.在package.json的启动脚本中定义对应环境的配置,比如我在本地启动,希望启动的时候可以拿到development对应的环境变量,那么可以改为

 //这里是启动命令,前边的名字dev:dev,无所谓 ,叫什么都可以,最主要的是后边的命令,--open就是启动的时候直接打开对应的网页,--mode就是指定对应的环境

    "dev:dev": "vite --open --mode development ",

    "dev:pro":"vite --open --mode production",

//那么打包命令就是下边这样,道理都是一样的,通过--mode指定对应的环境

    "build:pro": "vue-tsc && vite build --mode production",

3.那么在启动后,或者通过对应环境打包后,我们在代码中任何ts或者js代码中就可以通过import.meta.env获取到对应的环境变量对象了

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

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

相关文章

burpsuite模块介绍之项目选项

使用该模块中的功能实现对token的爆破 靶场搭建:phpstudy的安装与靶场搭建 - junlin623 - 博客园 (cnblogs.com) 实现 1)先抓个包 2)设置宏 要实现我们爆破的时候请求的token也跟靶场一样一次一换从而实现爆破,那就需要用到项目选项中的宏(预编译功能)

MathType2024MAC苹果电脑版本下载安装图文教程

在数学和科学的世界里,表达精确的方程式和化学公式是至关重要的。MathType作为一款及其优秀且有全球影响力的数学公式编辑器,让这一切变得触手可及。MathType Mac版已全新升级,作为Microsoft Word和PowerPoint的Add-In插件,为您的…

Matlab定义函数计算斐波那契数列

以下是使用 MATLAB 定义函数计算并输出斐波那契数列前 200 个数的示例代码&#xff1a; function result fibonacci(n)if n < 1 || n > 200result NaN;elseif n 1 || n 2result 1;elseresult fibonacci(n-1) fibonacci(n-2);end endn 200; result fibonacci(n)…

Js的String的replace(和replaceAll(

EcmaJavascriptJs的String的 replace( 和 replaceAll( 方法 String.prototype.replaceString.prototype.replaceAll 相同点 都是String.prototype的函数都是用于字符串替换都是两个参数第一个参数都可以是正则或字符串第二参数都可以是字符串或者回调函数, 回调会传入一个参…

如何选择合适的语音呼叫中心?

市场上不同的语音呼叫中心提供商&#xff0c;都有其独特的优势和不足。企业在选择语音呼叫中心服务公司时&#xff0c;主要考虑以下因素&#xff1a;服务质量、价格、技术支持、客户支持等。 首先&#xff0c;服务质量是选择语音呼叫中心需关注的最重要因素之一。 为确保语音…

Flink CEP完全指南:捕获数据的灵魂,构建智慧监控与实时分析大师级工具

Flink CEP(Complex Event Processing)是 Apache Flink 的一个库,用于实现复杂的事件流处理和模式匹配。它可以用来识别事件流中的复杂模式和序列,这对于需要在实时数据流中进行模式识别的应用场景非常有用,比如监控、异常检测、业务流程管理等。 在Flink CEP中,你可以定…

哈希查找【数据结构】

DS哈希查找—线性探测再散列 题目描述 定义哈希函数为H(key) key%11&#xff0c;输入表长&#xff08;大于、等于11&#xff09;。输入关键字集合&#xff0c;用线性探测再散列构建哈希表&#xff0c;并查找给定关键字。 输入 测试次数t 每组测试数据为&#xff1a; 哈希表长…

大数据StarRocks(四) :常用命令

这次主要介绍生产工作中Starrocks时的常用命令 4.1 连接StarRocks 4.1.1 Linux命令行连接 [roothadoop1011 fe]# yum install mysql -y [roothadoop1011 fe]# mysql -h hadoop101 -uroot -P9030 -p4.1.2 Windows客户端 DBeaver 连接 4.2 常用命令 4.2.1 查看状态 1. 查看f…

C/C++汇编学习(四)——编写不同的C++程序并分析其汇编输出

我们可以从一个简单的C代码示例开始&#xff0c;然后生成其对应的汇编代码并进行解析。这个过程不仅展示了C代码如何被转换成汇编语言&#xff0c;而且还帮助理解编译器是如何处理代码的。 案例一 C 代码示例 让我们使用一个简单的C代码示例&#xff1a;一个计算两个数之和的…

Linux 命令汇总

Linux 命令 1.查找命令 find /home/gitlab-runner/videofusionbe/api/logs/ -name ‘04-08.log’ -print 2.更换用户命令 Sudo - gitlab-runner 3.使用停止现有项目 sh rsbc.sh stop 4.启动现有项目 sh rsbc.sh start 5.启动日志 tail -f Web.log.2022-04-21.log 6.…

【Java项目】实战CRUD的功能整理(持续更新)

目录 前言1. MybatisPlus功能2. Excel处理3. 其他 前言 在实战中学习&#xff0c;整理每个功能细节以及各个函数的使用 对于Java的细节可看我之前的专栏&#xff1a;Java专栏 1. MybatisPlus功能 完整的CRUD可看我之前的文章&#xff1a; Springboot整合MybatisPlus的基本…

linux安装nodejs

一&#xff0c;yum安装 yum -y install nodejs 二&#xff0c;下载安装包安装 官网下载地址&#xff1a;Download | Node.js 建议安装低版本的&#xff0c;安装高版本的会有很多依赖&#xff0c;处理起来非常麻烦&#xff0c;还浪费时间 [rootmaster1 local]# wget https://…

【ArcGIS微课1000例】0086:基于七普人口数据的人口密度分析与制图

本文基于七普人口数据(省份、地级市、县区三级)进行人口密度计算分析与制图。 文章目录 一、人口密度介绍二、数据准备三、密度计算1. 投影转换2. 密度计算四、密度制图四、注意事项一、人口密度介绍 人口密度(density of population)是单位土地面积上的人口数量。通常使用的计…

C++类成员的访问控制

前言 本篇文章介绍C类成员的访问控制 关键字 C的类成员通过使用三个关键字来对成员的访问进行控制&#xff0c;并且只有这三个关键字&#xff1a; publicprivateprotected 使用场景 上面的三个关键字会扮演两种角色&#xff0c;也就是说会有两种使用的地方&#xff1a; …

【数值分析】插值法,lagrange插值,牛顿插值

1. 插值法介绍 插值法是一种通过已知数据点来估计未知数据点的方法。它通过构建一个函数或曲线&#xff0c;使其经过已知数据点&#xff0c;从而在数据点之间进行估计或预测。插值法的基本思想是假设已知数据点之间存在某种规律或趋势&#xff0c;并利用这种规律来推断未知数据…

全解析阿里云Alibaba Cloud Linux镜像操作系统

Alibaba Cloud Linux是基于龙蜥社区OpenAnolis龙蜥操作系统Anolis OS的阿里云发行版&#xff0c;针对阿里云服务器ECS做了大量深度优化&#xff0c;Alibaba Cloud Linux由阿里云官方免费提供长期支持和维护LTS&#xff0c;Alibaba Cloud Linux完全兼容CentOS/RHEL生态和操作方式…

conda环境下Could not create share link解决方法

1 问题描述 在运行chatglm-6B项目时&#xff0c;运行python web_demo.py&#xff0c;出现如下错误&#xff1a; (chatglm) [rootlocalhost ChatGLM2-6B]# python web_demo.py Loading checkpoint shards: 100%|██████████████████████████████…

SwiftUI之深入解析如何创建一个灵活的选择器

一、前言 在 Dribbble 上找到的设计的 SwiftUI 实现时&#xff0c;可以尝试通过一些酷炫的筛选器扩展该项目以缩小结果列表。筛选视图将由两个独立的筛选选项组成&#xff0c;两者都有一些可选项可供选择。但是&#xff0c;在使用 UIKit 时&#xff0c;总是将这种类型的视图实…

Anaconda下调用ArcGIS的arcpy工具包

1.从64位切换到32位开发模式: set CONDA_FORCE_32BIT1 2. 创建2.7的环境 conda create -n py27 python2.7 3.将ArcGIS的目录C:\Python27\ArcGIS10.1\Lib\site-packages\Desktop10.1.pth直接拷贝到Anaconda3的目录里&#xff08;C:\Users\xxx\Anaconda3\Lib\site-packages&a…

RK3568 学习笔记 : ubuntu 20.04 下 Linux-SDK 镜像烧写

前言 开发板&#xff1a;【正点原子】ATK-DLRK3568 开发板&#xff0c;编译完 Linux-SDK 后&#xff0c;生成了相关的镜像文件&#xff0c;本篇记录一下 镜像烧写&#xff0c;当前编译环境在 VMware 虚拟机中&#xff0c;虚拟机系统是 ubuntu 20.04 此次烧写还算顺利&#xff…