在 Vue 项目中,可以通过设置不同的环境变量来区分不同的环境,例如本地开发环境、测试环境和生产环境。以下是设置环境变量的步骤:

1、在src下新建三个文件夹

(.env.local、.env.test 和 .env.prod) 

2、配置信息

  • .env.local
VUE_APP_ENV=local
VUE_APP_API_URL=http://localhost:8080
  •  .env.test
VUE_APP_ENV=test
VUE_APP_API_URL=http://124.220.110.203:9090/
  •  .env.prod
VUE_APP_ENV=prod
VUE_APP_API_URL=http://124.220.110.203:9090/

3、修改启动脚本 

修改本地启动脚本、测试打包脚本和生产打包脚本以使用环境变量

修改启动脚本: 在package.json文件中,找到scripts字段下的对应脚本,并修改为如下所示:

 "scripts": {
    "dev": "vue-cli-service serve --mode local",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build --mode prod"
  }

 注意:VUE_APP_ENV=local的值要与--mode local相对应

4、在 Vue 项目的代码中,可以使用process.env访问定义的环境变量。

// 创建axios实例
const request = axios.create({
    baseURL: process.env.VUE_APP_API_URL, // 设置baseUrl
    timeout: 6000 // 设置超时时间
})

5、现在,你可以使用相应的脚本来启动开发服务器、测试打包和生产打包了。例如,在命令行中运行以下命令:

  • 本地启动:npm run dev
  • 测试打包:npm run build:test
  • 生产打包:npm run build:prod

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

看门狗定时器

1. 看门狗 看门狗: 用于设备在 程序异常(死机) 时 可以自动重启设备 实现原理: 通过定时器 进行定时 , 在定时器时间结束前 进行 "喂狗" 重置定时器时间 若时间到,还没有"喂狗",系统重启 本质就是一个定时器, 如何定时? 定时器 本质是对 晶振时钟进行 计…

上位机图像处理和嵌入式模块部署(c/c++ opencv)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 opencv可以运行在多个平台上面,当然windows平台也不意外。目前来说,opencv使用已经非常方便了,如果不想自己编译…

前端工程化之上cdn

一、cdn介绍 cdn的使用还是和前端打包相关,我们都希望前端最后的打包页面越小越好。那么可不可以把一些包不pack进去,让用户的流浪器自行下载呢?答案是可以的,那这些包就会被托管到分发站点上,就是在全国都有服务器&a…

【C++】STL和vector容器

STL和vector容器 基本概念六大组件容器算法迭代器容器算法迭代器 vector容器基本概念vector构造函数赋值vector的容量和大小vector插入与删除vector存取数据函数原型 vector互换容器vector预留空间vector容器嵌套容器 基本概念 长久以来,软件届一直希望建立一种可重…

解决 github.com port 443: Timed out 的问题

国内访问github.com总是那么不竟如人意,时而无法加载网页,时而等我们抽完了一根烟后,它还处于转圈的状态。 虽然国内有gitee.com等诸多的代码托管平台,但却鲜有国人愿意去呢?其中的缘由,想必也不用我多说&a…

SkiaSharp:.NET强大而灵活的跨平台图形库

在.Net 6之前,我们一般是使用System.Drawing.Common来生成图像。 但在.Net 6平台需要配置,才能在非Windows平台使用System.Drawing.Common。而从.Net 7开始,非Windows不再允许使用,官方也给我们推荐了几个替代库。 今天我们一起来…

MySQL索引类型及数据结构【笔记】

1 索引类型 返回面试宝典 主键索引(PRIMARY):数据列不允许重复,不允许为NULL,一个表只能有一个主键。 唯一索引(UNIQUE):数据列不允许重复,允许为NULL,一个表允许多个列创建唯一索引…

软考之项目管理

一、考点分布 盈亏平衡分析(※)进度管理(※※※)软件质量管理(※※)软件配置管理(※※) 二、盈亏平衡分析 正常情况下,销售额固定成本可变成本税费利润 盈亏平衡下&#…

JDK8新特性:Stream

Stream 认识Stream 也叫Stream流,是jdk8开始新增的一套API(java.util.stream.*),可以用于操作集合或者数组的数据。优势:Stream流大量的结合了Lambda的语法风格来编程,提供了一种更强大,更加简…

SSH:加密安全访问网络的革命性协议

目录 博客前言 一.ssh介绍 1.为什么需要SSH? 2.SSH是如何工作的? 连接建立 版本协商 算法协商 密钥交换 用户认证 会话请求 会话交互 3.SSH和SSL的区别 二.实战(centos配置密钥) 2.1.ssh/里面的文件作用解释 2.1 配…

【C++】std::variant

上一篇文章讲到了 union,union union存在很多问题,因此C17设计了一个新的variant替代原来的union。 union的问题 无法知道当前使用的类型是什么。而且union无法自动调用底层数据成员的析构函数。 这些使得一般只对一些“基本类型”使用union&#xf…

处理 Maven jar 包下载失败问题

目录 1、配置国内 Maven 源 配置和检测 settings.xml 配置国内源 2、删除本地 maven 创库的 jar 重新下载 3、其他问题 一般情况下 maven jar 包下载不成功可能有两种情况: 1)没有配置国内源 2)jar 包需要重新下载 下面详细讲解如何解决这两…

机器学习 | 利用Pandas进入高级数据分析领域

目录 初识Pandas Pandas数据结构 基本数据操作 DataFrame运算 文件读取与存储 高级数据处理 初识Pandas Pandas是2008年WesMcKinney开发出的库,专门用于数据挖掘的开源python库,以Numpy为基础,借力Numpy模块在计算方面性能高的优势&am…

【计网·湖科大·思科】实验二 计算机网络的寻址问题

🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux 😘欢迎关注:👍点赞🙌收藏✍️留言 🏇码字不易,你的👍点赞🙌收藏❤️关注对我真的很重要&…

物联网IOT: 风浆叶片拧紧装配及实时监测系统

某大型风电设备,通过机器人应用与精益化生产体系的融合,打造出行业领先的具备柔性生产能力的“脉动式”生产体系。同时在关键工序上。其中,在叶片装配等关键工序上使用由智能机器人代替人工,以提高生产的效率和装配质量可靠性,将六轴机器人、视觉系统、光电系统、液压、气动、伺…

RISC-V常用汇编指令

RISC-V寄存器表: RISC-V和常用的x86汇编语言存在许多的不同之处,下面将列出其中部分指令作用: 指令语法描述addiaddi rd,rs1,imm将寄存器rs1的值与立即数imm相加并存入寄存器rdldld t0, 0(t1)将t1的值加上0,将这个值作为地址,取…

科技助力“双碳”:墨水屏电子桌牌在绿色办公中的作用

随着科技的发展,人们对绿色环境可持续发展也越来越重视,所以,我国在几年前,就提出了“双碳”政策(即碳达峰与碳中和的简称。2020年9月中国明确提出2030年“碳达峰”与2060年“碳中和”目标),而作…

DNS欺骗

DNS(域名系统)作为当前全球最大 、最复杂的分布式层次数据库系统,具有着开放、庞大、复杂的特性。它为全球用户提供域名解析服务,是互联网的重要基础设施。但由于其在设计之初未考虑安全性、人为破坏等因素 ,DNS系统在互联网高度发达的今天面…

Python之数据可视化(地图)

目录 一 基础地图应用 二 全国疫情图 一 数据准备 二 数据处理 二 湖北省疫情图 一 数据准备 二 数据处理 一 基础地图应用 导入map地图对象 from pyecharts.charts import Map map Map() 写入数据 data [("北京市",100),("上海市"…

详细解读vcruntime140_1.dll修复的手段,如何快速解决vcruntime140_1.dll丢失问题

当出现“无法找到vcruntime140_1.dll”或程序“未能正常启动”时,这通常指示系统中缺失了一个关键文件:vcruntime140_1.dll。作为Visual C Redistributable组件的一部分,这个小文件在很多用Visual Studio编译的C程序运行时发挥着重要作用。解…