vue3和vue2项目中如何根据不同的环境配置基地址?

在不同环境下取出的变量的值是不同的, 像这样的变量称为环境变量

为什么要使用环境变量呢?

开发环境生产环境下的接口地址有可能是不一样的,所以我们需要根据环境去配置不同的接口基地址

1、vue2环境变量配置

在根目录创建:.env.development和.env.production文件
标准定义:命名以VUE_APP_xxx开头, 可以在所有的文件中去获取(建议用它)
使用:用process.env.属性的方式获取
开发环境默认NODE_ENV值为development
生产环境默认NODE_ENV值为production
在这里插入图片描述

2、vue3环境变量配置

在根目录创建:.env.development和.env.production文件
标准定义:命名以VITE_xxx开头, 可以在所有的文件中去获取(建议用它)
使用:import.meta.env.属性的方式获取
在这里插入图片描述

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

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

相关文章

Shell与Bash与POSIX与Linux间的关系

shell是什么? Shell的英语翻译是“壳”,其作用也跟名字差不多,为操作系统套个壳,人与操作系统的壳交互。与壳相对应的则是操作系统内核,一个“壳”一个“核”。核从1970年代开始就基本定型了,没什么大的改…

验证码项目(java实现)

1、Kaptcha详细配置 配置项 配置说明 默认值 kaptcha.border 图⽚边框,合法值:yes , no yes kaptcha.border.color 边框颜⾊,合法值: r,g,b (and optional alpha) 或者 white,black,blue black kaptcha.image.width 图⽚宽 200…

总结:微信小程序中跨组件的通信、状态管理的方案

在微信小程序中实现跨组件通信和状态管理,有以下几种主要方案: 事件机制 通过事件机制可以实现父子组件、兄弟组件的通信。 示例: 父组件向子组件传递数据: 父组件: <child binddata"handleChildData" /> 子组件: Component({..., methods: { handleChildData(…

蓝桥杯刷题第七天

这道题一开始看真的有点简单&#xff0c;但一开始跟着案例先入为主了&#xff0c;误以为是只有两个项目想着穷举完n个人&#xff0c;&#xff08;n1&#xff09;*&#xff08;n2&#xff09;/2种情况但后面发现项目不止两个&#xff0c;用链表来好像我也不会&#xff0c;用二维…

C# WPF编程-Application类(生命周期、程序集资源、本地化)

C# WPF编程-Application类 应用程序的生命周期创建Application对象应用程序的关闭方式应用程序事件 Application类的任务显示初始界面处理命令行参数访问当前Application对象在窗口之间进行交互 程序集资源添加资源检索资源pack URI内容文件 本地化构建能够本地化的用户界面 每…

注意力机制篇 | YOLOv8改进之添加DAT注意力机制

前言:Hello大家好,我是小哥谈。DAT(Vision Transformer with Deformable Attention)是一种引入了可变形注意力机制的视觉Transformer。在训练算法模型的时候,通过引入可变形注意力机制,改进了视觉Transformer的效率和性能,使其在处理复杂的视觉任务时更加高效和准确。�…

2024最新GPT4.0使用教程:GPTs,AI绘画,AI换脸,AI绘画,文档分析一站式解决

一、前言 ChatGPT3.5、GPT4.0、相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和用户进行创作交流。 然而&#xff0c;GPT-4对普通用户来说都是需要额外付费才可以…

前端订阅推送WebSocket定时任务

0.需求 后端定时向前端看板推送数据&#xff0c;每10秒或者30秒推送一次。 1.前言知识 HTTP协议是一个应用层协议&#xff0c;它的特点是无状态、无连接和单向的。在HTTP协议中&#xff0c;客户端发起请求&#xff0c;服务器则对请求进行响应。这种请求-响应的模式意味着服务器…

将 Three 带到 Vue 生态系统,TresJs 中文文档上线

将 Three 带到 Vue 生态系统&#xff0c;TresJs 中文文档上线 中文文档上线入门指南 ThreeJS 在创建 WebGL 3D 网站方面是一个奇妙的库&#xff0c;同时他也是一个保持不断更新的库&#xff0c;一些对其封装的维护者&#xff0c;如 TroisJS&#xff0c;往往很难跟上其所有的更…

Kubernetes kafka系列 | Strimzi 部署kafka-bridge

Strimzi kafka集群部署直通车 一、kafka bridge 介绍 Kafka Bridge 是 Apache Kafka 生态系统中的一个工具或组件&#xff0c;用于实现 Kafka 与其他系统或协议之间的通信或集成。Kafka 本身是一个分布式事件流平台&#xff0c;广泛用于构建实时数据流水线和流式应用程序。然而…

物联网实战--入门篇之(八)嵌入式-空气净化器

目录 一、风扇调速 二、通讯协议 三、净化器运行逻辑 一、风扇调速 单片机是不能直接驱动电机的&#xff0c;因为主芯片的驱动电流比较小(50mA左右)&#xff0c;他们之间正常还要有个电机驱动器&#xff0c;常用的有TB6612、L298和L9110等&#xff0c;目前项目用的这个电机它…

redis基础数据结构

文章目录 前言字符串常见命令内部编码使用场景1、缓存&#xff08;Cache&#xff09;功能2、计数3、共享Session4、限速 哈希命令内部编码使用场景存储结构化数据 列表命令内部编码使用场景1.阻塞消息队列模型2.文章列表3.微博 Timeline 集合命令内部编码使用场景1.给用户增加标…