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插件,为您的…

Js的String的replace(和replaceAll(

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

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

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

大数据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…

linux安装nodejs

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

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

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

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

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

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

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

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

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

Callback Hook

一、Callback Hook 函数名:useCallback 用于得到一个固定引用值的函数,通常用它进行性能优化。 useCallback: 该函数只需要传入两个参数:一个回调函数和一个依赖数组即可。 1.函数,useCallback会固定该函数的引用,…

搜索二维矩阵 II(LeetCode 240)

1.问题描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性: 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例: 输入:matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9,16,22],[10…

快速、准确地检测和分类病毒序列分析工具 ViralCC的介绍和详细使用方法,fudai shiyong ijaoben

介绍 viralcc是一个基因组病毒分析工具,可以用于快速、准确地检测和分类病毒序列。 github:dyxstat/ViralCC: ViralCC: leveraging metagenomic proximity-ligation to retrieve complete viral genomes (github.com) Instruction of reproducing resul…

微众区块链观察节点的架构和原理 | 科普时间

践行区块链公共精神,实现更好的公众开放与监督!2023年12月,微众区块链观察节点正式面向公众开放接入功能。从开放日起,陆续有多个观察节点在各地运行,同步区块链数据,运行区块链浏览器观察检视数据&#xf…

flutter项目用vscode打包apk包,完美运行到手机上

1.创建密钥库 执行以下命令: keytool -genkey -v -keystore F:/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key 生成 2,048 位RSA密钥对和自签名证书 (SHA256withRSA) (有效期为 10,000 天) 2.填写密钥内容 执行以上命令后会提示一次输入密钥库密码、确认…

【ES6语法学习】解构赋值

文章目录 引言一、什么是解构赋值1.1什么是解构赋值1.2 数组的解构赋值1.2.1 基本用法1.2.2 默认值1.2.3 剩余参数 1.3 对象的解构赋值1.3.1 基本用法1.3.2 默认值1.3.2 剩余参数 1.4 字符串的解构赋值1.5 函数参数的解构赋值 二、解构赋值的优势和应用场景2.1 代码简化和可读性…

【React系列】JSX核心语法和原理

本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. ES6 的 class 虽然目前React开发模式中更加流行hooks,但是依然有很多的项目依然是使用类组件&#x…

es索引数据过滤查询

1.我们往kibana插入数据,来进行查询 POST /t1/_doc/ {"name":"cat","age":"18","address":"BJ","job":"dev" } POST /t1/_doc/ {"name":"dog","age":"1…

改善 GitHub Pages 阅读体验:Quick Docs

一个不到 10MB 的小工具,来提供本地、快速的文档访问,来改善开发过程中,阅读在线文档体验糟糕的问题。 以及,介绍如何快速制作一个利于分发使用的,离线文档工具包。 写在前面 即使现在 AI 辅助编码和 Chat Bot 类的…

【git使用】了解三种git commit合并的使用场景(rebase、merge、cherry-pick)

参考 【Git学习笔记】逃不掉的merge和rebase-腾讯云开发者社区-腾讯云git merge 和 git rebase - 知乎git cherry-pick 教程 - 阮一峰的网络日志 简单理解各种合并的方法 线性合并,使用 rebase —— feature 分支开发,提交前拉取 master 最新改动进行…