当前位置: 首页 > article >正文

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

注意事项:

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

基础配置demo

// .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

文件命名规则

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

使用方式

// 在 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.kler.cn/a/448284.html

相关文章:

  • 腾讯云智能结构化OCR:以多模态大模型技术为核心,推动跨行业高效精准的文档处理与数据提取新时代
  • XILINX平台LINUX下高速ADC08060驱动
  • 【服务器】MyBatis是如何在java中使用并进行分页的?
  • MySQL 在window免安装启动
  • STM32MP1linux根文件系统目录作用
  • 并发控制之CyclicBarrier
  • HTML综合案例
  • C++设计模式:享元模式 (附文字处理系统中的字符对象案例)
  • pro文件转换为CMakeLists.txt文件,QT官方工具使用教程
  • vue+springboot+cas配置及cookie传递问题
  • 现代密码学总结(下篇)
  • Golang中的Map是怎么遍历的
  • 面试题整理9----谈谈对k8s的理解1
  • Rocky Linux 9安装RabbitMQ
  • 设计模式之结构型
  • 【ArcGIS Pro微课1000例】0064:栅格目录、栅格数据集、镶嵌数据集
  • 怎样在html中异步加载js文件,以避免js文件太大而影响页面打开速度?
  • 【Tomcat运行startup.bat闪退】
  • Connecting to Oracle 11g Database in Python
  • 1.gitlab 服务器搭建流程
  • 在 Django 中使用 SMTP 发送邮件是一个常见的需求
  • Python——turtle库(海龟绘图)介绍与使用
  • javaEE-多线程编程-3
  • EdgeX Core Service 核心服务之 Core Command 命令
  • Redis梳理
  • 计算机视觉目标检测——DETR(End-to-End Object Detection with Transformers)