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

news2024/10/7 8:28:08

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.coloradmin.cn/o/1411845.html

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

相关文章

直播主播产品转场话术

主播产品转场话术 一、预告下一环节 亲爱的观众朋友们,非常感谢大家对我们直播间的关注与支持!现在,我们即将进入下一个环节,这个环节将为您带来更多惊喜!请耐心等待,不要离开哦! 二、解释过渡 感谢大家对我们产品的喜爱与支持…

循环测试之旅——深度解析Pytest插件 pytest-repeat

在软件开发中,测试的重要性不言而喻。而为了提高测试的鲁棒性和可靠性,Pytest插件 pytest-repeat 应运而生。这个插件可以帮助你轻松实现测试用例的循环运行,以更全面地评估代码的稳定性。本文将深入介绍 pytest-repeat 插件的基本用法和实际案例,助你更好地利用循环测试,…

JavaSE基础详细总结

JavaSE基础总结 目录 初始Java数据类型和变量运算符逻辑控制方法数组类和对象继承和多态抽象类和接口String异常 1、初始java Java之父——詹姆斯.高斯林 Java语言的命名(爪哇岛。盛产咖啡)和咖啡图标都反映了詹姆斯。高斯林热爱咖啡。 1、“一次编…

SpringBoot高级原理

SpringBoot高级原理 今日内容: 理解SpringBoot自动化配置源码理解SpringBoot健康监控 1 SpringBoot自动化配置原理 01-SpringBoot2高级-starter依赖管理机制 目的:通过依赖能了解SpringBoot管理了哪些starter 讲解: 通过依赖 spring-bo…

外汇天眼:新坦利斯曼黄金矿业的前首席执行官承认违反新西兰金融市场法

新西兰金融市场管理局(FMA)今天确认,新西兰证券交易所上市公司新坦利斯曼黄金矿业有限公司的前首席执行官Matthew Geoffrey Hill承认违反了2013年《金融市场行为法》(FMCA),在此法案下作出了虚假和误导性陈…

Linux本地部署SVN服务结合内网穿透实现远程访问

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

【wink】如何导出Live实况?

1.首页点击「转Live实况」,即可将图片或视频快速转为Live实况格式。 2.编辑后的视频,可在保存分享页点击「存为Live实况」。(本功能仅限iOS用户使用)

【每日一题】4.LeetCode——杨辉三角

📚博客主页:爱敲代码的小杨. ✨专栏:《Java SE语法》 ❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️ 🙏小杨水平有限,欢迎各位大佬指点&…

佩戴口罩监测识别摄像机

佩戴口罩监测识别摄像机是一种基于计算机视觉技术的智能监测设备,它能够快速准确地识别出人们是否佩戴口罩,并对佩戴口罩的人员进行识别和记录。这种摄像机在当前抗击病毒的背景下具有重要意义,在公共场所、医疗机构、交通枢纽等地方都有着广…

Gradle学习笔记:Gradle的使用方法

文章目录 1.初始化项目2.构建脚本语言选择3.项目命名4.项目构建过程 1.初始化项目 创建一个test空文件夹,在该文件夹下打开终端,并执行命令:gradle init. 会有一个选项让你选择项目的类型。下面是每个选项的含义和用途: basic&am…

cg插画设计行业怎么样,如何学习插画设计

插画设计行业是一个充满创意和艺术性的行业,随着数字化时代的不断发展,cg插画的应用范围越来越广泛,市场需求也在逐年增长。以下是一些关于acg插画设计行业的现状和发展趋势: 市场需求不断增长:随着广告、媒体、影视、…

图像读写(imgcodecs 模块)与视频读写

内置格式 OpenCV 可以在没有任何第三方库帮助的情况下读取以下格式: BMP的 高动态范围 (WITH_IMGCODEC_HDR) 太阳栅格 (WITH_IMGCODEC_SUNRASTER) PPM、PGM、PBM、PFM(、WITH_IMGCODEC_PXMWITH_IMGCODEC_PFM) PNG、JPEG、TIFF、WEBP 支持 格式选择…

C语言第九弹---二维数组

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】 二维数组 1、二维数组的创建 1.1、二维数组的概念 ​1.2、⼆维数组的创建 2、二维数组的初始化 2.1、不完全初始化 ​2.2、完全初始化 ​2.3、按照行初始化 ​2.4、…

C++实用教程(四):面向对象核心多态 笔记

推荐B站视频:C现代实用教程(四):面向对象核心多态_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV15v4y1M7fF/?spm_id_from333.999.0.0&vd_sourcea934d7fc6f47698a29dac90a922ba5a3 本项目通用的tasks.json文件和launch.json tasks.json {"versi…

TMS智慧园区物流系统:提升化工园区管理效率的最佳选择

在化工行业园区中,企业面临着诸多痛点,如人工管理流程复杂、园区堵车、园区安全管理不到位、设备资产管理缺失、环境管理混乱无章、数据无法追溯等。这些问题不仅影响企业的生产效率和经济效益,还可能对员工的生命安全和环境造成潜在威胁。为…

uniapp封装公共的方法或者数据请求方法

仅供自己参考,不是每个页面都用到这个方法,所以我直接在用到的页面引用该公用方法: 1、新建一个util.js文件 export const address function(options){return new Promise((resolve,reject)>{uni.request({url:"https://x.cxniu.…

C# 命名管道管道NamedPipeServerStream使用

NamedPipeServerStream 是 .NET Framework 和 .NET Core 中提供的一个类,用于创建和操作命名管道的服务器端。命名管道是一种在同一台计算机上或不同计算机之间进行进程间通信的机制。 命名管道允许两个或多个进程通过共享的管道进行通信。其中一个进程充当服务器&…

CentOS网络配置进阶:深入研究network服务和NetworkManager

前言 如果你正在使用CentOS系统,并且想要深入了解网络管理和配置,那么本文肯定适合你!在这篇文章中,作者深入探讨了CentOS中的两种网络管理方式:network服务和NetworkManager。通过详实的讲解和实用的示例,你将会学习到如何使用这两种工具来管理网络接口、配置IP地址、网…

外贸邮件群发软件有哪些?邮件群发的系统?

外贸邮件群发软件哪个比较好?外贸开发信软件推荐? 对于许多外贸企业来说,邮件营销是一种非常有效的推广方式。那么,外贸邮件群发软件就成为了必备的工具。蜂邮EDM将为你揭秘几款主流的外贸邮件群发软件,助你更好地开展…

用javadoc生成springboot的文档

概述:生成 Spring Boot 项目的 JavaDoc 文档与生成普通的 Java 项目类似。 目录 第一步:创建一个springboot项目 第二步:编写pom文件 第三步:运行 Maven 命令生成 JavaDoc 第四步:查看结果 第一步:创建…