在 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.mzph.cn/news/649995.shtml

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

相关文章

Java中实现线程的两种方式

实现线程的第一种方式: 编写一个类,直接继承java.lang.Thread,重写run方法 怎么创建线程对象? new就行了 怎么启动线程呢? 调用线程对象的start()方法 注意:方法体中的代码永远都是自上而下的顺序依次逐行执行。 以下…

Android源码设计模式解析与实战第2版笔记(一)

第一章 走向灵活软件之路 — 面向对象的六大原则 优化代码的第一步 — 单一职责原则 单一职责原则的英文名称是Single Responsibility Principle,缩写是SRP。 SRP:就一个类而言,应该仅有一个引起它变化的原因。 一个类中应该是一组相关性很…

Redis创建集群

主要内容 搭建redis集群 能力目标 搭建redis集群 一 应用场景 为什么需要redis集群? 当主备复制场景,无法满足主机的单点故障时,需要引入集群配置。 一般数据库要处理的读请求远大于写请求 ,针对这种情况,我们优…

ES 分布式搜索的运行机制

ES 分布式搜索的运行机制-腾讯云开发者社区-腾讯云 ES 分布式搜索的运行机制 ES 有两种 search_type 即搜索类型: •query_then_fetch (默认)•dfs_query_then_fetch query_then_fetch query_then_fetch 1.用户发起搜索,请求…

Python的hashlib模块:7种加密算法深入剖析

目录 一、引言 二、哈希算法简介 三、hashlib模块中的加密算法 MD5 SHA1 SHA224/SHA256/SHA384/SHA512 SHA3 其他算法: 四、加密算法比较与选择 五、实际应用与注意事项 六、总结 本文将深入探讨Python的hashlib模块,重点解析其中的七种加密算…

【GitHub项目推荐--GitHub 上的高仿项目】【转载】

整理了现在比较热门 App 的高仿项目,这些项目都是有「recently updated」,而不是年代久远不再维护的项目。包括高仿微信、微博、B站、斗鱼、抖音、美团、头条、掘金等等。 这些项目涉及的技术栈有 Vue、Flutter 等等,看这些高仿项目的源码有…

element-ui 树形控件 实现点击某个节点获取本身节点和底下所有的子节点数据

1、需求&#xff1a;点击树形控件中的某个节点&#xff0c;需要拿到它本身和底下所有的子节点的id 1、树形控件代码 <el-tree:data"deptOptions"node-click"getVisitCheckedNodes"ref"target_tree_Speech"node-key"id":default-ex…

Discuz论坛搭建:Linux宝塔面板一键部署,固定地址畅享公网访问

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 安装基础环境二. 一键部署Discuz三. 安装cpolar工具四. 配置域名访问Discuz…

PHP AES加密

PHP AES加密&#xff1a;保护数据安全的重要工具 在数字化时代&#xff0c;数据安全是一个至关重要的问题。随着互联网的普及和信息的快速传播&#xff0c;我们需要采取措施来保护敏感数据。PHP AES加密就是一个强大的工具&#xff0c;它可以帮助我们保护数据的机密性。本文将…

Vue3生命周期 VS Vue2生命周期(小记)

概念&#xff1a;Vue组件实例在创建时要经历一系列的初始化步骤&#xff0c;在此过程中Vue会在合适的时机&#xff0c;调用特定的函数&#xff0c;从而让开发者有机会在特定阶段运行自己的代码&#xff0c;这些特定的函数统称为&#xff1a;生命周期钩子。 规律&#xff1a; 生…

vue3 根据点击位置,实现一个用户头像弹框定位

vue3 根据点击位置&#xff0c;实现一个用户头像弹框定位 需求背景 最近在做直播后台&#xff0c;涉及到对用户的一些操作&#xff0c;比如关注/取关/禁言/踢出直播间。多个地方都要用&#xff0c;需要封装一个弹框组件 效果图 实现过程分析 根据点击元素&#xff0c;获取元…

HTML - 介绍

一.简介 HTML&#xff0c;超文本标记语言&#xff08;HyperText Markup Language&#xff09;&#xff0c;是一种用于创建网页的标准标记语言。我们可以使用HTML建立自己的WEB网站或特定页面。HTML运行在浏览器上&#xff0c;由浏览器解析。 ⚠️注意&#xff1a;HTML文件的后缀…

node学习过程中的终端命令

冷的哥们手真tm冷&#xff0c;打字都是僵的&#xff0c;屮 目录 一、在学习nodejs过程中用到的终端命令总结 一、在学习nodejs过程中用到的终端命令 node -v nvm install 20.11.0 nvm list nvm list available nvm on nvm -v nvm use 20.11.0 node加要运行的js文件路径 ps&a…

Clamp cell 介绍

Clamp cell&#xff08;夹持单元&#xff09;是芯片设计中用于限制电路中某个节点的电压范围的重要电路单元。它的主要目的是确保电路中的信号或电源电压不会超出安全范围&#xff0c;从而保护芯片免受潜在的损坏或性能问题。 电压限制&#xff1a; Clamp cell的主要功能之一是…

HashSet和LinkedHashSet的区别

HashSet和LinkedHashSet之间有什么区别 HashSet和LinkedHashSet都是Java中的集合类&#xff0c;它们都实现了Set接口&#xff0c;所以都具有Set的基本特性&#xff0c;即不包含重复的元素。但是&#xff0c;它们在元素的存储和迭代顺序上有一些区别。 存储方式&#xff1a;Ha…

燃烧的指针(二)

&#x1f308;个人主页&#xff1a;小田爱学编程 &#x1f525; 系列专栏&#xff1a;c语言从基础到进阶 &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于c语言的优质内容&#xff01;&#x1f3c6;&#x1f3c6; &#x1f600;欢迎来到小田代码世界~ &#x…

Centos 虚拟机安装

转自 气质&末雨的博客 Centos 虚拟机安装_centos虚拟机安装教程-CSDN博客

CentOS 7.9 OS Kernel Update 3.10 to 4.19

date: 2024-01-18, 2024-01-26 原 OS Kernel 3.10 升级至 4.19 1.检查默认内核 检查 vmlinuz 版本 [rootlocalhost ~]# grubby --default-kernel /boot/vmlinuz-3.10.0-1160.105.1.el7.x86_64 [rootlocalhost ~]#检查 Linux 内核版本 [rootlocalhost ~]# uname -a Linux loc…

Tree-Shaking 作用和实现原理

一、什么是Tree-shaking Tree-shaking 它的名字来源于通过摇晃&#xff08;shake&#xff09;JavaScript代码的抽象语法树&#xff08;AST&#xff09;&#xff0c;是一种用于优化JavaScript代码的技术&#xff0c;主要用于移除未被使用的代码&#xff0c;使得最终生成的代码包…

大模型应用开发:为产品创建一个AI客服/智能助手

欢迎阅读本系列文章&#xff01;我将带你一起探索如何使用OpenAI API来开发GPT大模型应用。无论你是编程新手还是资深开发者&#xff0c;都能在这里获得灵感和收获。 本文将继续展示AI助手的开发方式&#xff0c;在OpenAPI中它的名字是Assistants。 什么是Assistants&#xf…