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

Vue2配置环境变量的注意事项

在实际开发中时常会遇到需要开发环境与生产环境中一些参数的替换,为了方便线上线下环境变量切换可以利用node中的process进行环境变量管理

实现步骤如下:

1.在 根目录 新增环境文件 .env.development.env.production 注意文件名称保持一致( 需要强调的是文件中的变量名切记 必须 VUE_APP_ 开头)

# 在开发环境和生产环境中按实际情况加入变量
VUE_APP_BASE_URL=http://*****
VUE_APP_SOCKET_URL=ws://******

2.使用方法:
在需要替换的变量处使用 process.env.VUE_APP_BASE_URL 进行替换即可

使用:

yarn serve 

会默认使用 .env.development 中的环境变量

使用:

yarn build

会默认将 .env.production 文件中的环境变量打包

自定义环境变量文件如何使用?
新建环境变量文件 .env.xxtest 并写入对应的变量

# 在开发环境和生产环境中按实际情况加入变量
VUE_APP_BASE_URL=http://*****
VUE_APP_SOCKET_URL=ws://******

在package.json中加入对应的脚本命令

"test": "vue-cli-service serve --mode xxtest"

添加完成后如下所示:

  "scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build" ,"lint": "vue-cli-service lint","test": "vue-cli-service serve --mode xxtest"},

其中 –model 后的 xxtest 为自定义的环境变量文件名 test为命令名称
可以在终端使用下列命令启动将会使用该环境文件中的变量

yarn test

至此完成了配置和启动

相关文章:

Vue2配置环境变量的注意事项

在实际开发中时常会遇到需要开发环境与生产环境中一些参数的替换,为了方便线上线下环境变量切换可以利用node中的process进行环境变量管理 实现步骤如下: 1.在 根目录 新增环境文件 .env.development 和 .env.production 注意文件名称保持一致( 需要强调的是文件中的变量名切…...

机器学习:探索未知边界,解锁智能潜力

欢迎来到 破晓的历程的 博客 ⛺️不负时光,不负己✈️ 在这个日新月异的科技时代,机器学习作为人工智能领域的核心驱动力,正以前所未有的速度改变着我们的世界。从智能家居的个性化推荐到自动驾驶汽车的精准导航,从医疗诊断的辅助…...

万户OA-ezOFFICE fileUpload.controller 任意文件上传漏洞复现

0x01 产品描述: 万户OA(Office Automation)是一款企业级协同办公管理软件,旨在为企业提供全面的办公自动化解决方案。万户ezOFFICE存在任意文件上传漏洞。攻击者可以通过该远程下载任意文件到目标服务器,导致攻击者可获…...

Time-MoE : 时间序列领域的亿级规模混合专家基础模型

Time-MoE : 时间序列领域的亿级规模混合专家基础模型 时间序列预测一直是量化研究和工业应用中的重要课题。随着深度学习技术的发展,大规模预训练模型在自然语言处理和计算机视觉领域取得了显著进展,但在时间序列预测领域,这些模型的规模和运…...

Spring Boot入门指南

前言 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。本文将详细介绍 Spring Boot 的基本概念、环境搭建、第一…...

MYSQL(学习笔记)

<div>深分页怎么优化&#xff1f;</div> <div>还是以上面的SQL为空&#xff1a;select * from xxx order by id limit 500000, 10;</div> <div>方法一&#xff1a;</div> <div>从上面的分析可以看出&#xff0c;当offset非常大时&am…...

学校周赛(1)

A - Short Sort 题目&#xff1a; 思路&#xff1a; 本条题目只允许改一处地方&#xff0c;只有三个字母&#xff0c;我们可以直接枚举所有移动过的结果&#xff0c;同时使用哈希去记录其值&#xff0c;对于每一个输入我们都寻找是否有这个值记录&#xff0c;有则输出YES否则…...

人生苦短,我用Python✌

面向代码的解释型语言 数据开发和AI 编程语言:让计算机了解我们干什么&#xff0c;翻译官 1.下载软件 解释器安装 点击第二个 改路径 D:\python 安装 测试 winr打开 输入代码 输出 退出环境 exit&#xff08;&#xff09; 新建文本文档后缀改成py 编写 运行 安装编写代码…...

uniapp js判断key是否在json中?

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…...

Codeforces Round 975 (Div. 2) C. Cards Partition

题目链接&#xff1a;题目 大意&#xff1a; 给出若干种卡片&#xff0c;每种卡片有一定数量&#xff0c;你可以加入不超过 k k k张任意已给出种类的卡片&#xff0c;使得它们可以被分成若干组&#xff0c;每组容量一定&#xff0c;且同组内不存在相同种类的卡片&#xff0c;…...

Qt 首次配置 Qt Creator 14.01 for Python

前言&#xff1a; 如何用QT实现Python的配置的交互界面。本文从0开始&#xff0c;进行实践的介绍。 在上一节里面&#xff0c;我们做了社区版本的配置&#xff1a; https://blog.csdn.net/yellow_hill/article/details/142597007?spm1001.2014.3001.5501 这一节&#xff0…...

【python】代码发布前检查- vulture:查找死代码

分析Python项目中未被使用的.py文件 Vulture&#xff1a; Vulture是一个专门用于查找Python代码中的死代码的工具。它可以识别未使用的代码&#xff0c;包括未导入的模块。 安装&#xff1a; pip install vulture使用&#xff1a; vulture your_project_directory...

Yolov10环境配置

参考文章&#xff1a;1.YOLOv10超详细环境搭建以及模型训练&#xff08;GPU版本&#xff09;-CSDN博客 2.Windows下安装pytorch教程(下载.whl的方式)_pytorch whl-CSDN博客 安装步骤和文件夹顺序一样 1.安装CUDA和cuDNN 1.1安装CUDA 1.1.1查看当前你的电脑显卡支持的最高CUD…...

iOS 提取图片的主题色,并支持灵活提取

遇到一个需求&#xff0c;要提取图片中的色调&#xff0c;但还有一点特殊的需求&#xff0c;就是不是提取颜色最多的色调&#xff0c;也不是平均的色调&#xff0c;是图片中偏暗的色调 这就需要我们动态的调整我们提取的算法&#xff0c; 下面就看代码 dispatch_async(dispatch…...

语雀笔记使用记录

初识语雀 语雀官网 语雀帮助 教你如何使用语雀提高效率 语雀极简使用指南 | 10个常用技巧&#xff0c;带你快速入门 语雀安装 语雀下载地址 根据自己的pc平台下载对应的版本&#xff0c;然后傻瓜式安装即可 初试语雀 语雀为云笔记&#xff0c;并且其特性比较符合我个人的需求…...

安全教育培训小程序系统开发制作方案

安全教育培训小程序系统是为了提高公众的安全意识&#xff0c;普及安全知识&#xff0c;通过微信小程序的方式提供安全教育培训服务&#xff0c;帮助用户了解并掌握必要的安全防范措施。 一、目标用户 企业员工&#xff1a;各岗位员工&#xff0c;特别是IT部门、财务、行政等对…...

【面试题】软件测试实习(含答案)

软件测试实习常见面试题&#xff0c;主要是功能测试相关的基础问题 目录 一、软件测试基础 1、介绍一下你最近的项目&#xff0c;以及工作职责 2、软件项目的测试流程? 3、黑盒测试与白盒测试的区别? 4、黑盒测试常见的设计方法?怎么理解等价类方法和边界值方法 1&…...

后端回写前端日期格式化

问题 不进行格式化处理&#xff0c;就会导致传递的字符串很奇怪 解决方案 注解&#xff08;字段&#xff09; <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.2</…...

微信小程序开发系列之-在微信小程序中使用云开发

微信小程序开发系列之-在微信小程序中使用云开发 随着微信小程序的快速发展&#xff0c;云开发成为了一个强大的工具&#xff0c;它提供了无需搭建和维护服务器的便捷环境。云开发允许开发者直接使用云数据库、存储和云函数等服务&#xff0c;大大简化了小程序的开发流程。在本…...

《论文阅读》 用于产生移情反应的迭代联想记忆模型 ACL2024

《论文阅读》 用于产生移情反应的迭代联想记忆模型 ACL2024 前言简介任务定义模型架构Encoding Dialogue InformationCapturing Associated InformationPredicting Emotion and Generating Response损失函数问题前言 亲身阅读感受分享,细节画图解释,再也不用担心看不懂论文啦…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...