在 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, // 设置baseUrltimeout: 6000 // 设置超时时间
})

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于机器学习的地震预测(Earthquake Prediction with Machine Learning)

基于机器学习的地震预测(Earthquake Prediction with Machine Learning) 一、地震是什么二、数据组三、使用的工具和库四、预测要求五、机器学习进行地震检测的步骤六、总结 一、地震是什么 地震几乎是每个人都听说过或经历过的事情。地震基本上是一种自…

【项目日记(五)】第二层: 中心缓存的具体实现(上)

💓博主CSDN主页:杭电码农-NEO💓   ⏩专栏分类:项目日记-高并发内存池⏪   🚚代码仓库:NEO的学习日记🚚   🌹关注我🫵带你做项目   🔝🔝 开发环境: Visual Studio 2022 项目日…

单片机设计_智能蓝牙电子秤(51单片机、HX711AD)

想要更多项目私wo!!! 一、电路设计 智能蓝牙电子称由51单片机、HX711AD称重模块、HC-05蓝牙模块、LCD1602等电路组成硬件部分,然后上传至APP。 二、运行结果 三、部分代码 #include "main.h" #include "HX711.h" #include "uart.h" #include …

docker-compose Install influxdb1+influxdb2+telegraf

influxd2前言 influxd2 是 InfluxDB 2.x 版本的后台进程,是一个开源的时序数据库平台,用于存储、查询和可视化时间序列数据。它提供了一个强大的查询语言和 API,可以快速而轻松地处理大量的高性能时序数据。 telegraf 是一个开源的代理程序,它可以收集、处理和传输各种不…

使用Opencv-python库读取图像、本地视频和摄像头实时数据

使用Opencv-python库读取图像、本地视频和摄像头实时数据 Python中使用OpenCV读取图像、本地视频和摄像头数据很简单, 首先需要安装Python,然后安装Opencv-python库 pip install opencv-python然后在PyCharm或者VScode等IDE中输入对应的Python代码 一…

搜维尔科技:【简报】元宇宙数字人赛道,优秀作品赏析《大福太郎》

这次采用亮眼的浅粉做为发色,为了贴合她小警察的身分 给了她一顶特制的警帽,上面有大福的荧光蓝叶片作为标 志,而在配件及裙子上也加入了许多科技元素的小巧思。 学校: 朝阳科技大学(台湾) 选手&#xff…

java集合ArrayList和HashSet的fail-fast与fail-safe以及ConcurrentModificationException

在 java 的集合工具类中&#xff0c;例如对 ArrayList 或者 HashSet 进行删除元素后再遍历元素时&#xff0c;会抛出 ConcurrentModificationException 异常。 fail-fast ArrayList public class TestList {public static void main(String[] args) {ArrayList<Integer>…

【Python】02快速上手爬虫案例二:搞定验证码

文章目录 前言1、不要相信什么验证码的库2、以古诗文网为例&#xff0c;获取验证码1&#xff09;code_result.py2&#xff09;gsw.py 前言 提示&#xff1a;以古诗文网为例&#xff0c;获取验证码&#xff1a; 登录&#xff1a;https://so.gushiwen.cn/user/login.aspx 1、不…

第八篇 交叉编译华为云Iot SDK到Orangepi3B

本篇主要内容&#xff1a; 一、交叉编译华为云Iot SDK依赖1.宿主机安装交叉编译工具链&#xff08;1&#xff09;选择下载交叉编译工具链&#xff08;2&#xff09;解压、添加环境变量、重启2.交叉编译依赖库&#xff08;0&#xff09; 准备工作&#xff08;1&#xff09; 交叉…

简单记录一下如何安装python以及pycharm(图文教程)(可供福建专升本理工类同学使用)

本教程主要给不懂计算机的或者刚刚开始学习python的同学&#xff08;福建专升本理工类&#xff09;&网友学习使用&#xff0c;基础操作&#xff0c;比较详细&#xff0c;其他问题等待补充&#xff01; 安装Python 1.进入python官网&#xff08;https://www.python.org/&a…

excel中多行合并后调整行高并打印

首先参考该文&#xff0c;调整全文的行高。 几个小技巧&#xff1a; 1.转换成pdf查看文件格式 2.通过视图--》分页预览&#xff0c;来确定每页的内容&#xff08;此时页码会以水印的形式显示&#xff09; 3. 页面布局中的&#xff0c;宽度可以选为自动&#xff0c;因为已经是…

Tomcat session复制及session共享技术

目录 1、环境 2、配置测试页面 3、配置session共享 前言&#xff1a; 为什么要做session复制或共享 实现Session复制或Session共享的目的是为了在多个Tomcat实例之间实现Session的无缝转移和共享&#xff0c;以提供更高的可伸缩性、负载均衡和容错性。以下是一些原因&#x…