vue如何设置环境变量

发布时间:2021-08-01 07:43:41

在开发的时候一般会有是三个环境:开发环境 测试环境 线上环境


vue 中有个概念就是模式,默认先vue cli 有三个模式


development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

但是往往开发的时候可能不止有三种:
本地环境(local)
开发环境(development)
测试环境(devtest)
预发布环境(beta)
生产环境(production)


参考链接:配置环境变量


1.创建不同环境变量文件


如官方文档所说,通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境,所以配置了5个.env文件。如下图:


2.给.env文件添加内容

基本格式如下:


NODE_ENV=环境名称
VUE_APP_URL=对应的环境地址

如我本地环境的配置就如下图所示:


我本地是用的easy-mock模拟的数据,所以配置的地址是mock接口地址。


3.在package.json中添加不同环境对应的执行语句

如官方文档所说,可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图:



4.使用

文件已创建好,配置语句也已写好。怎么用它呢?


首页你需要哪个环境,就执行哪个环境的命令语句。


比如我现在需要local环境,就执行 npm run local-serve 。如下图所示:

然后通过 process.env.NODE_ENV 获取环境名;通过 process.env.VUE_APP_URL 获取环境对应的url。


比如我们在axios请求中,就可以把它的baseURL设置为 process.env.VUE_APP_URL ,如下图所示:


如果你不确定你自己现在是在哪个环境变量下,可以 console.log(“当前环境变量:”+process.env.NODE_ENV) 和 console.log(“当前环境路径:”+process.env.VUE_APP_URL) 看下。


总而言之就是,你需要哪个环境变量,就 【npm run 对应的环境变量】 就完事了!

相关文档

  • 跳河自杀
  • 比较摇滚的节奏感歌曲推荐
  • 2021工商所上半年工作总结
  • hadoop之hadoop-2.6.0-cdh5.7.0源码编译支持压缩以及伪分布式部署
  • 青春有关的唯美句子
  • 高中优秀叙事散文
  • 感动中学生的经典励志故事
  • 语音采集回放系统-硬件总结
  • 不花钱不吃药的排毒偏方
  • 指甲油能补车漆吗?怎么用指甲油补车漆?
  • 2020年江西萍乡市中医院引进高层次人才公告12人
  • 赴美探亲签证通常是三个月吗
  • 2017年情人节表白热门句子
  • 学会包粽子的说说新手学包粽子心情说说
  • 失败后走向成功的名言
  • 手机欠费没网了怎么办
  • 怎么把电话移除黑名单
  • 微波炉烤香蕉的做法 哪些人适合吃香蕉牛奶燕麦粥
  • 家装集成墙面效果图「最新」
  • 2021公司办公室个人工作总结
  • kafa学习笔记二--kafka Tool
  • 素子花殇的小说作品
  • 网购电脑主机靠谱吗
  • 2021五一去澳门要做核酸检测吗 五一去澳门回来需要隔离吗2021
  • 练瑜伽瘦腿的最佳时间在什么时候
  • 【开发】与开发团队高效协作的8个小技巧
  • 狐妖小红娘真人版电影
  • 祖国在我心中演讲稿《东方雄狮的崛起》
  • 城镇低收入申请书范文_低收入家庭的申请书模板
  • 配置管理的主要工作
  • 猜你喜欢

  • 孕妈妈如何提高免疫力防流产?
  • 湘教版高中地理必修一第二章第三节《大气环境》优质课件(共35张PPT)
  • 企业网络营销的必然选择 效益型网站建设
  • 原平市利达建材有限公司企业信用报告-天眼查
  • 苏州鹤立恒新材料科技有限公司企业信用报告-天眼查
  • kaios系统有微信吗
  • 第9章操作系统的安全
  • 长春市华洋建材经销处企业信用报告-天眼查
  • 2015年沈阳市中考英语试题及答案解析(Word版)
  • docker volumes-from 使用
  • 七年级道德与法治下册 第三单元 在集体中成长 第六课“我”和“我们”第2框 集体生活成就我课件2 新人教版
  • 高校财务预算绩效管理中平衡计分卡的运用
  • 有余数的除法新人教版小学三年级数学上册2
  • 2018_2019学年高中物理第一章运动的描述第4节实验:用打点计时器测速度课时跟踪检测新人教版必修144
  • 园长秋季开学典礼致辞
  • 【最新2018】幼儿园家长会演讲稿范本-word范文 (2页)
  • 时间轴商务风市场专员求职简历Word模板.docx
  • 心理素质在歌唱中所起的积极作用
  • 水泥谕旨构件项目可行性研究报告环评用(评审版)
  • 2016年秋季广东省广州市番禺区教师资格认定公告
  • 单接口压测和多接口压测tps区别_性能压测-让你了解我们公司真实的过程
  • 微分方程建模详解
  • 最新-竞选岗位演讲稿 公司广告总监岗位竞职演讲稿精选 精品
  • 内蒙古中西部剪纸艺术的典型代表和林格尔剪纸艺术审美价值探究
  • 多媒体启发式教学设计
  • 深氮氲继濞上海)有限公司(企业信用报告)- 天眼查
  • 五年级学生上学期拓展素质评语
  • 【主持词范文】八一建军节战友聚会主持词范本
  • 党课心得体会专题1(5篇)与党课心得体会总结汇编
  • 易拉罐形状和尺寸的最优设计
  • 【最新文档】小学班主任控辍工作计划-word范文模板 (4页)
  • 最新硬件工程师瑟肽旯ぷ髯芙狒呦掳肽旯ぷ骷苹?PT模板
  • 简洁清新毕业论文答辩PPT模板
  • 创造基于能力的企业文化
  • 平顶山市2013—2014学年第一学期期末调研考试九年级化学
  • 简析新时代背景下川剧高腔曲牌的改革变迁
  • 人教版二年级下册数学*题课件-2、表内除法(一)第 3 课时 *均分(3)
  • 精彩的“阅兵式”
  • 中国极片切耳机行业市场调查研究报告(目录)
  • C++程序的内存格局通常分为哪几个区
  • 数学教学工作总结范例
  • 某x司班组机械车工岗位行为规范
  • 2019届高三数学课标一轮复*课件6.1 数列的概念与简单表示法
  • 【最新文档】三年级上册第六单元作文:家乡的美景400字作文-优秀word范文 (3页)
  • 2018西安画室排名前十位哪个画室比较好
  • 为自己喝彩的作文400字
  • 畜牧业机械零件项目可行性研究报告
  • 北京祥虹家用电器修理部企业信用报告-天眼查
  • 数据结构与算法分析第七章 排序
  • 2020年高考语文复*第一编现代文阅读专题一微案一论述类文本阅读学案(含解析)
  • 渗透生活教育理念 促使学生主动学*
  • 如何体面地送礼
  • 小学一年级上学期体育教学总结
  • 美国南方社会的暴力研究——《去吧,摩西》中的暴力主题分析
  • 在线排课系统(论文范文,JSP,JAVA,毕业设计)
  • 连城县新泉供销合作社良福村农资供应网点企业信用报告-天眼查
  • 财务的报表英文翻译大全(含资产负债表、现金流量表、利润表等等)
  • [人教版]小学三年级数学上册第五单元试题
  • 2020届北师大版九年级数学下册: 1 锐角三角函数 第1课时 锐角三角函数(一)
  • 村委会旱情调查报告(1)
  • 关于生活如此精彩的作文
  • 2017-2018九年级班主任工作总结与2017-2018二年级上册语文教学工作总结汇编.doc
  • 宝宝学*说话是一件很神奇的事情
  • 苏教初中语文八下《5紫藤萝瀑布》PPT课件 (5)
  • 「最新」大班幼小衔接工作计划
  • C#课程设计-简单人事管理系统的设计与实现
  • 云南瑞林投资有限公司企业信用报告-天眼查
  • 三年级作文:运动会作文350字_2
  • 创新创业宣传标语大全
  • 2019-2020年度重点小学六年级语文下学期开学考试试卷苏教版 附答案
  • 扫黑除恶工作汇报模板大全
  • 惠州市肉蛋水产批发企业名录152家
  • 市政广场的秋天
  • 信息编码的学习体会
  • 母亲生日讲话稿3分钟
  • 送给朋友的中秋祝福语大全
  • 精选人教版过关练*题五年级下学期小学语文期末模拟试卷IV卷-标准版
  • 长沙格思企业管理咨询有限公司企业信息报告-天眼查
  • 影城服务礼仪培训专题培训课件
  • 【精品资料首发】中国传统建筑体系有哪些要点?
  • 圣安德鲁斯大学计算机科学本科
  • 无形资产课件 第四章 企业专利权管理PPT资料26页
  • 用双眼发现生活的美经典文章
  • 沈阳市冠丰不锈钢有限公司企业信用报告-天眼查
  • 电脑版