Vue3 -- 环境变量的配置【项目集成3】

环境:

在项目开发过程中,至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。

  • 开发环境 .env.development
  • 测试环境 .env.test
  • 生产环境 .env.production

不同阶段请求的状态(如接口地址等)不一样,开发项目的时候要经常配置代理跨域,若手动切换接口地址是繁琐而且很容易出错。

.env.development文件:

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '小圣运营平台'
VITE_APP_BASE_API = '/dev-api'

在这里插入图片描述

.env.production文件:

NODE_ENV = 'production'
VITE_APP_TITLE = '小圣运营平台'
VITE_APP_BASE_API = '/prod-api'

在这里插入图片描述

.env.test文件:

NODE_ENV = 'test'
VITE_APP_TITLE = '小圣运营平台'
VITE_APP_BASE_API = '/test-api'

在这里插入图片描述

配置package.json文件:

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

在这里插入图片描述

测试:

在这里插入图片描述
在这里插入图片描述
没有问题,可以获取到!

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

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

相关文章

AI 大模型应用:AI开发的捷径工作流模式

一、引言 大部分人使用 AI,大概都跟我一样,停留在初级阶段。 平时,就是向 AI 提问(又称聊天),偶尔也用一些现成的服务:生成图片、生成代码、翻译文章等等。 但是,时间久了&#x…

研究生被安排许多文献阅读,如何快速的阅读众多英文文献?

在科研的道路上,筛选文献就像是大海捞针,找对了方法,就能快速锁定那些有价值的信息。尤其是在实验方向尚未确定时,如何从海量文献中筛选出“金子”,就显得尤为重要。 关键的第一步:精准筛选 当你面对一堆…

信创迎来冲刺三年,国产项目管理软件跑出数智化“加速度”

信创发展是国家当前重要的战略布局,对国家发展具有长远的战略意义。国资委信创79号文件规定,2027年前按顺序完成“28N”的党政与八大重点行业100%信创替代,通过信创产业发展,国家能够提高自主创新能力,加速推进国产化转…

LSTM(长短期记忆网络)详解

1️⃣ LSTM介绍 标准的RNN存在梯度消失和梯度爆炸问题,无法捕捉长期依赖关系。那么如何理解这个长期依赖关系呢? 例如,有一个语言模型基于先前的词来预测下一个词,我们有一句话 “the clouds are in the sky”,基于&…

基于Java仓库管理系统

一、作品包含 源码数据库全套环境和工具资源部署教程 二、项目技术 前端技术:Html、Css、Js、LayUI 数据库:MySQL 后端技术:Java、Spring Boot、MyBatis 三、运行环境 开发工具:IDEA 数据库:MySQL8.0 数据库管…

数量关系2_余数平方等差、整除和完工

目录 一、余数、平方数与等差数列1.等差数列2.平方数3.余数问题二、整除问题和合作完工问题1.利用倍数特性解决不定方程2.利用整除特性解决纯整除问题3.合作完工一、余数、平方数与等差数列 1.等差数列 ※等比数列不常考,或者考的时候比较复杂,可放弃。 补充1:常用的等差数…

cache中命中率和缺失率

这张图解释了缓存的三个关键指标:命中率、缺失率和缺失损失,并分析了它们在缓存访问中的重要性。 具体说明 命中(Hit): 命中表示要访问的信息在缓存中已经存在,不需要从更慢的主存中读取。命中率&#xff…

Jmeter查看结果树之查看响应的13种详解方法

软件测试资料领取:[内部资源] 想拿年薪40W的软件测试人员,这份资料必须领取~ 软件测试面试刷题工具:软件测试面试刷题【800道面试题答案免费刷】 Jmeter查看结果树查看响应有哪几种方法,可通过左侧面板底部的下拉框选择: 01 Te…

<Project-23 Navigator Portal> Python flask web 网站导航应用 可编辑界面:添加图片、URL、描述、位置移动

目的: 浏览器的地址簿太厚,如下图: 开始,想给每个 Web 应用加 icon 来提高辨识度,发现很麻烦:create image, resize, 还要挑来挑去,重复性地添加代码。再看着这些密密麻麻的含有重复与有规则的…

文心一言 VS 讯飞星火 VS chatgpt (391)-- 算法导论25.1 5题

五、说明如何将单源最短路径问题表示为矩阵和向量的乘积,并解释该乘积的计算过程如何对应 Bellman-Ford 算法?(请参阅24.1节。)。如果要写代码,请用go语言。 文心一言: 在解决单源最短路径问题时,我们可以将问题表示…

如何使用cx_Freeze打包编译python文件

1. 安装 cx_Freeze 首先,确保你已经安装了 cx_Freeze。你可以通过 pip 安装它: pip install cx_Freeze2.创建setup.py from cx_Freeze import setup, Executable import os# 确定包的文件和依赖 build_exe_options {"packages": ["os…

深度学习之其他常见的生成式模型

1.1 什么是自回归模型:pixelRNN与pixelCNN? ​ 自回归模型通过对图像数据的概率分布 p d a t a ( x ) p_{data}(x) pdata​(x)进行显式建模,并利用极大似然估计优化模型。具体如下: p d a t a ( x ) ∏ i 1 n p ( x i ∣ x 1 …

短期电力负荷(论文复现)

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

DBeaver如何设置自动刷新数据库表的数据,彻底解放双手!

前言 大家好,我是小徐啊。 DBeaver是一款常用的数据库连接工具,它的优点是免费使用,而且支持的数据库类型超级多,甚至可以直接安装数据库对应的驱动jar包来连接数据库。 比如达梦数据库,之前版本是可以通过jar包方式…

黄仁勋:AI革命将创百万亿美元价值!近屿智能带你入局AIGC

11月13日,NVIDIA在日本成功举办了2024年AI峰会。一场关于人工智能驱动的新工业革命的讨论热烈展开。英伟达创始人兼CEO黄仁勋与软银主席兼CEO孙正义共同探讨了当前技术革命的独特之处及其深远影响。 黄仁勋在会上表示,AI革命将创造的价值不是以万亿美元计…

知网翻译助手及其10款翻译工具使用体验大PK!!!

在这个信息爆炸的时代,翻译工具成了我们日常工作中不可或缺的得力助手。作为一个经常需要处理多语言文件的人,翻译工具对我来说简直是救命稻草。除了知网助手外,我还用过不少翻译软件,现在,我就来说说知网翻译助手和其…

Entity Framework的简单使用案例

需要引入的框架: 实体类: [Table("Users")] internal class User {[Key]public int Id { get; set; }[Required][StringLength(100)][Index(IsUnique true)]public string Username { get; set; }[Required][StringLength(100)]public strin…

Scroll 生态全面启动为 Pencils Protocol 赋能,DAPP 将迎强势腾飞

​Pencils Protocol 是 Scroll 生态最大的综合性 DeFi 平台,随着 DAPP 通证面向市场,Pencils Protocol 生态经济体系也将迎来全面运转。目前,DAPP 通证已经陆续上线了 Gate、Kucoin、Bitget、Coinone 等主流交易市场,全球用户能够…

【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,2-23

文件下载与邀请翻译者 学习英特尔开发手册,最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册,会是一件耗时费力的工作。如果有愿意和我一起来做这件事的,那么&#xff…

CPLD架构

1. 通用CPLD构架 传统的CPLD内部构架布局如图1-1所示,可编程互连阵列(PIA)在芯片中心位置,而逻辑阵列块则在芯片四周靠近I/O模块。目前大多数的CPLD都是采用这种结构,包括Xilinx主流的CoolRunner系列和Altera MAX 300…