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

news2024/11/16 1:54:05

环境:

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

  • 开发环境 .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.coloradmin.cn/o/2241193.html

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

相关文章

vxe-table 分享实现无限滚动行方式

Vxe UI vue vxe-table 分享无限滚动行方式 实现无限滚动加载有多种方式,可以使用 scroll 事件,也可以使用 scroll-boundary 事件,能满足不同的需求场景。 以下是分享使用 scroll-boundary 事件的用法。 原理 通过 scrollY.threshold 设置阈…

C++中的栈(Stack)和堆(Heap)

在C中,堆(heap)和栈(stack)是两种用于存储数据的内存区域。理解它们的原理和区别,对于优化代码性能和确保代码的安全性至关重要。以下是对C中堆栈的详细解析,包括它们的分配方式、优缺点、应用场…

outlook邮箱关闭垃圾邮件——PowerAutomate自动化任务

微软邮箱反垃圾已经很强大了非常敏感,自家的域名的邮件都能给扔到垃圾邮箱里,但还是在本地增加了一层垃圾邮箱功能,然后垃圾邮箱并没有提示,导致错过很多通知,本身并没有提供关闭的功能,但微软有个Microsof…

FFmpeg的基本结构

FFmpeg框架可以简单分为两层,上层是以ffmpeg、ffplay、ffprobe为代表的命令行工具;其底层支撑是一些基础库,包含AVFormat、AVCodec、AVFilter、AVDevices、AVUtils等模块库。 常用函数如下: 1. AVFormat 封装/解封装模块 avf…

Web性能优化:从基础到高级

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 Web性能优化:从基础到高级 Web性能优化:从基础到高级 Web性能优化:从基础到高级 引言 基础优…

MATLAB实战 利用1D-DCGAN生成光谱或信号数据

0.前言 在光谱学或信号处理领域,获取大量高质量的数据可能是一项挑战。利用DCGAN进行“迁移学习”,对抗性地生成光谱或信号数据,具有强化、泛化样本特征的应用潜力。 该实战项目提供了所有源代码与测试数据,旨在帮助学者快速地掌握…

react + ts定义接口类型写法

接口&#xff08;未进行ts定义&#xff09; export async function UserList(params: {// keyword?: string;current?: number;pageSize?: number;},// options?: { [key: string]: any }, ) {return request<API1.UserList>(http://geek.itheima.net/v1_0/mp/artic…

uniapp luch-request 使用教程+响应对象创建

1. 介绍 luch-request 是一个基于 Promise 开发的 uni-app 跨平台、项目级别的请求库。它具有更小的体积、易用的 API 和方便简单的自定义能力。luch-request 支持请求和响应拦截、全局挂载、多个全局配置实例、自定义验证器、文件上传/下载、任务操作、自定义参数以及多拦截器…

RHCE-DNS域名解析服务器

一、DNS简介 DNS &#xff08; Domain Name System &#xff09;是互联网上的一项服务&#xff0c;它作为将域名和 IP 地址相互映射的一个分布式 数据库&#xff0c;能够使人更方便的访问互联网。 DNS 系统使用的是网络的查询&#xff0c;那么自然需要有监听的 port 。 DNS 使…

Unity中HDRP设置抗锯齿

一、以前抗锯齿的设置方式 【Edit】——>【Project Settings】——>【Quality】——>【Anti-aliasing】 二、HDRP项目中抗锯齿的设置方式 在Hierarchy中——>找到Camera对象——>在Inspector面板上——>【Camera组件】——>【Rendering】——>【Pos…

电子工牌独立双通道定向拾音方案(有视频演示)

现在一些行业的客服人员在面对客户都要求使用电子工牌分别记录客服和顾客的声音,我们利用双麦克风阵列双波束拾音的方案设计了一个电子工牌方案.可以有效分别记录客服和顾客的声音. 方案思路: 我们采用了一个双麦阵列波束拾音的模块A-59,此模块可以利用2个麦克风组成阵列进行双…

Redis下载历史版本

Linux版本&#xff1a; https://download.redis.io/releases/ Windows版本&#xff1a; https://github.com/tporadowski/redis/releases Linux Redis对应gcc版本

Mysql篇-三大日志

概述 undo log&#xff08;回滚日志&#xff09;&#xff1a;是 Innodb 存储引擎层生成的日志&#xff0c;实现了事务中的原子性&#xff0c;主要用于事务回滚和 MVCC。 redo log&#xff08;重做日志&#xff09;&#xff1a;是 Innodb 存储引擎层生成的日志&#xff0c;实现…

MFC工控项目实例三十实现一个简单的流程

启动按钮夹紧 密闭&#xff0c;时间0到平衡 进气&#xff0c;时间1到进气关&#xff0c;时间2到平衡关 检测&#xff0c;时间3到平衡 排气&#xff0c;时间4到夹紧开、密闭开、排气关。 相关代码 void CSEAL_PRESSUREDlg::OnTimer_2(UINT nIDEvent_2) {// if (nIDEvent_21 &am…

通过 SSH 隧道将本地端口转发到远程主机

由于服务器防火墙,只开放了22端口,想要通过5901访问服务器上的远程桌面,可以通过下面的方式进行隧道转发。 一、示例命令 这条代码的作用是通过 SSH 创建一个 本地端口转发,将你本地的端口(5901)通过加密的 SSH 隧道连接到远程服务器上的端口(5901)。这种方式通常用于在…

docker——项目部署

什么是Docker&#xff1f; Docker是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可抑制的容器中&#xff0c;然后发布到任何流行的Linux机器上&#xff0c;也可以实现虚拟化。容器完全使用沙盒机制&#xff0c;相互之间不会存在任何接口。几…

LabVIEW-TestExec SL

文章目录 新建LabVIEW .llb库链接vi至TestExec SLTestPlan调用调用自定义动作创建变量配置动作参数 注意事项 新建LabVIEW .llb库 创建一个文件夹用来存放文件。在此文件夹下创建两个文件夹&#xff0c;分别命名为Actions和Bin。其中&#xff0c;Actions用于存放动作&#xff…

数据结构--数组

一.线性和非线性 线性&#xff1a;除首尾外只有一个唯一的前驱和后继。eg&#xff1a;数组&#xff0c;链表等。 非线性&#xff1a;不是线性的就是非线性。 二.数组是什么&#xff1f; 数组是一个固定长度的存储相同数据类型的数据结构&#xff0c;数组中的元素被存储在一…

NFS-Ganesha 核心架构解读

NFSv4 简要概述 NFS 这个协议( NFSv2 )最初由 Sun Microsystems 在 1984 年设计提出&#xff0c;由于存在一些不足&#xff0c;因此在随后由几家公司联合推出了 NFSv3。到了 NFSv4 时&#xff0c;开发完全由 IETF 主导&#xff0c;设计目标是&#xff1a; 提高互联下的 NFS 访…

Simulink对仿真数据进行FFT频谱分析

1 问题引入 在仿真阶段&#xff0c;经常会遇到有些仿真结果的数据需要进行频谱分析&#xff0c;如何快速便捷地操作&#xff0c;这里介绍其中一种简单的方法。主要利用 Simulink 中 Scope 显示的数据进行保存并进行 FFT 频谱分析&#xff0c;按下文操作即可。 2 实战 2.1 将…