多环境变量配置

本文介绍了Vue项目中如何配置多环境变量,包括开发、测试和生产环境。多环境变量用于满足不同阶段的需求,如接口域名和Webpack配置的差异。配置涉及.env文件,如.env.development、.env.production和.env.testing,其中添加的属性名需以VUE_APP_开头。通过process.env可以访问这些配置,并在封装的API中设置不同环境的基本路径。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Ⅰ、什么是多环境变量?

我们在vue项目开发中,项目在运行时会根据启动的指令来运行不同的环境,在不同的环境中,我们配置对应所需的变量来满足我们的开发需求,称为多环境变量。

环境一般分为开发环境,测试环境,生产环境

Ⅱ、作用

一个项目的完整流程,包含开发阶段、打包阶段、测试阶段,与之对应的则是不同的环境,因为每个环境的接口域名、webpack 配置都是不同的,所以在打包构建时,我们需要区分这些环境,这时就用到了环境变量。

Ⅲ、在配置多环境变量前,需要了解的知识点

.env文件是环境配置,会在项目运行时被加载,且只会被加载一次,单独的环境配置文件会覆盖全局环境配置的相同属性
.env全局环境配置,.env.development开发环境配置,.env.production生产环境配置,.env.testing测试环境配置
.env文件中的默认属性有NODE_ENV和VUE_APP_ENV
添加的属性名必须以 VUE_APP_ 开头,如:VUE_APP_XXX
可以通过process.env在任何地方访问到当前环境配置属性

Ⅳ、配置流程

首先是通过在根目录下创建.env.*(配置文件)文件,development 本地开发环境配置、test测试环境配置、production 正式环境配置。我们可以在封装的接口api文件夹中定义baseUrl文件,来区分不同环境下对应的不同的基本路径。

1、第一步
首先我们在项目跟目录下找到package.json文件,在scripts中配置serve 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值