Vue 环境变量配置、使用方法、注意事项

news/2024/12/22 14:44:22/

注意事项:

  • 环境变量必须以 VUE_APP_ 开头,只有 VUE_APP_ 开头的变量才会被 webpack 处理
  • NODE_ENV 是内置的环境变量,NODE_ENV 不需要 VUE_APP_ 前缀
  • 修改环境变量后需要重启开发服务器才能生效
  • 环境变量在构建时会被静态替换
  • 环境变量在客户端代码中可见,不要存储敏感信息

基础配置demo

javascript">// .env
VUE_APP_API_URL=https://api.example.com// .env.development
VUE_APP_API_URL=http://localhost:8080// .env.production
VUE_APP_API_URL=https://prod.example.com

文件命名规则

javascript">.env                # 所有环境都会加载
.env.local         # 所有环境都会加载,但会被git忽略
.env.development   # 开发环境加载
.env.production    # 生产环境加载

使用方式

javascript">// 在 Vue 组件中使用
console.log(process.env.VUE_APP_API_URL)
console.log(process.env.NODE_ENV)  // "development" 或 "production"// 在配置文件中使用
export default {baseUrl: process.env.VUE_APP_API_URL
}//比如使用环境变量修改当前页面的标题
document.title=process.env.VUE_APP_TITLE


http://www.ppmy.cn/news/1557213.html

相关文章

踩准智能汽车+机器人两大风口,速腾聚创AI+机器人应用双线爆发

日前,RoboSense速腾聚创交出了一份亮眼的Q3财报。受到多重利好消息影响,其股价也应势连续大涨。截止12月9日发稿前,速腾聚创股价近一个月内累计涨幅已超88%。 财务数据方面,速腾聚创在今年前三季度实现总收入约11.3亿元&#xff0…

【计算机网络】lab2 Ethernet(链路层Ethernet frame结构细节)

🌈 个人主页:十二月的猫-CSDN博客 🔥 系列专栏: 🏀计算机网络_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步,十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2.…

图漾相机-ROS1_SDK_ubuntu版本编译(新版本)

文章目录 官网编译文档链接官网SDK下载链接1、下载 Camport ROS1 SDK1.下载git2、下载链接 2、准备编译工作1、安装 catkin2、配置环境变量3. 将Camport3中的linux库文件拷贝到 user/lib目录下4、修改lunch文件制定相机(可以放在最后可以参考在线文档)**…

数据结构(C语言版)-6.查找

1. 查找的基本概念 2. 静态查找 2.1 顺序查找 typedef int KeyType; typedef int InfoType; typedef struct {KeyType key;InfoType otherdata; }SeqList; // 顺序表类型 // 顺序查找int SeqSearch(SeqList R[], int n, int k) {int i n;R[0].key k; // R[0].key为查找不成…

【Java并发】创建和使用线程常用方法总结

目录 什么是线程 线程和进程、协程(虚拟线程)的区别 线程和进程的区别 线程和协程的区别 线程的六种状态 1.NEW 2.RUNNABLE 3.BLOCKED 4.WAITING 5.TIME_WAITING 6.TERMINATED 创建线程 方法一:通过继承Thread类 方法二&#xf…

sql server msdb数据库备份恢复

备份 BACKUP DATABASE [msdb] TO DISK ND:\liyuanshuai\test\sqlserver_bakfile\msdb20241219.bak WITH NOFORMAT, NOINIT, NAME Nlys-完整 数据库 备份, SKIP, NOREWIND, NOUNLOAD, COMPRESSION, STATS 10 GO然后删除2个测试的job,停止 SQL Server 代理…

第19天:信息收集-Web应用源码获取闭源备份开发泄漏WebPack打包资源搜索ICO定位

#知识点 1、信息收集-Web应用-源码获取-已知指纹&未知指纹 2、信息收集-Web应用-源码获取-泄漏问题&发现指纹 一、参考文章: https://www.secpulse.com/archives/124398.html https://mp.weixin.qq.com/s/QgLDdaefXlZtvlSiFQShZw 二、源码泄漏原因&#xff…

第十四届蓝桥杯Scratch国赛真题—转动的车轮

转动的车轮 编程实现: 转动的车轮(车轮使用画笔绘制,画面中不能出现其他角色,否则0分)。 注:角色、背景非源素材。 具体要求: 1). 点击绿旗,背景如图所示; 2). 等待1…