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

多环境变量配置

多环境变量配置

package.json 里的 scripts 配置 serve test build,通过 –mode xxx 来执行不同环境

通过 npm run serve 启动本地 , 执行 development
通过 npm run test 打包测试 , 执行 testing
通过 npm run build 打包正式 , 执行 production

在package.json 文件夹中 找到
scripts 位置 进行配置

  "scripts": {"serve": "vue-cli-service serve --open","build": "vue-cli-service build","stage":"vue-cli-service build --mode staging"},

配置介绍

  1. VUE_APP_ 开头的变量,在代码中可以通过 process.env.VUE_APP_ 访问。
  2. 比如,VUE_APP_ENV = ‘development’ 通过process.env.VUE_APP_ENV 访问。
  3. 除了 VUE_APP_* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量NODE_ENVBASE_URL

在项目根目录中新建.env.*

  1. 1.env.development文件 本地环境
MODE_ENV = 'development'

1.2 .env.production文件 开发环境

NODE_ENV = 'production'

1.3 .env.staging 文件 测试环境

NODE_ENV = 'production'

这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV development testing production
变量我们统一在 src/config/env.*.js 里进行管理。

这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢?
修改起来方便,不需要重启项目,符合开发习惯。

config/index.js中

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.NODE_ENV)
module.exports = config

启动:
1. npm run serve
2. npm run build
3. npm run stag
配置对应环境的变量,拿本地环境文件 env.development.js 举例,用户可以根据需求修改

// 本地环境配置
module.exports = {title: 'vue-h5-template',baseUrl: 'http://localhost:9018', // 项目地址baseApi: 'https://test.xxx.com/api', // 本地api请求地址APPID: 'xxx',APPSECRET: 'xxx'
}

根据环境不同,变量就会不同了

// 根据环境不同引入不同baseApi地址
import { baseApi } from '@/config'
console.log(baseApi)

首先创建三个 .env.*开头的 本地环境 开发环境 测试环境
在package.json 文件夹中 找到
scripts 位置 进行配置
在src文件目录下创建 config 文件
本地环境 开发环境 测试环境 三个js文件
方别是:env.development.js env.production.js env.staging.js index.js
本地环境 开发环境 测试环境 三个js文件
可以在env.development.js env.production.js env.staging.js
中配置

在index.js中导出

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

投资理财1

1. 投资术语 熔断:也叫自动停盘机制,是指当股指波幅达到规定的熔断点时,交易所为控制风险采取的暂停交易措施。具体说是对某一合约在达到涨跌停板之前,设置一个熔断价格,使合约买卖报价在一段时间内只能在这一价格范围…...

【项目】springboot中使用kaptcha生成验证码,登录时密码加盐处理

记录使用kaptcha的过程 为前后端分离项目&#xff0c;前端vue框架 0.下载jar包 在maven的网站https://mvnrepository.com/search?qcom.github.penggle 搜索下载jar 导入到工程中 1.添加依赖 <dependency><groupId>com.github.penggle</groupId><art…...

Unity行为树插件Behavior Tree Designer记录.Decorator装饰2

ReturnFailure The return failure task will always return failure except when the child task is running. 子Task运行期间将一直返回失败。主要重载了Decorate函数。在父类中的意义是申请改变子Task的状态。从代码上看也是这样&#xff0c;子Task的状态是成功&#xff0c…...

Mybatis源码研究之DatabaseIdProvider

借助Mybatis提供的 databaseId特性&#xff0c;我们可以实现让应用同时支持多种类型的数据库。 0. 目录这里写目录标题1. 测试用例2. 原理解析3. databaseId的其它应用4. Links1. 测试用例 相关的配置和测试用例如下 &#xff08;这里我们以源生的mybatis为例&#xff0c;与Sp…...

OA系统十四:注销功能;

注销&#xff1a;就是把登录时所保留的信息全部给清除掉&#xff1b;其本质就是清除保存在Session中的数据&#xff0c;让session回到初始的状态&#xff1b; 至于为什么只需要手动清除session对象中的数据&#xff0c;而request对象中的数据不用手动清除&#xff0c;这是因为r…...

vmmap分析内存泄露问题

vmmap是sysinternals工具集中的一个工具&#xff0c;主要用于分析一个进程的虚拟内存和物理内存的使用情况。更有效的是&#xff0c;可以通过对比两个不同时间的内存使用情况的Snapshot&#xff0c;来查找内存泄露问题。 vmmap介绍 当你用vmmap去查看一个正在运行的进程的时候…...

学生成绩管理系统+打包

文章目录文件管理&#xff1a;D:\hyt\python\pytorch_graduate\file_management成绩管理&#xff1a;D:\hyt\python\pytorch_graduate\stusystem打包&#xff1a;D:\hyt\python\pytorch_graduate\package_test学生成绩管理系统0.基础原理1.文件管理2 学生管理系统Tk打包1.基础原…...

Yocto Build with Bitbake的调试

https://docs.yoctoproject.org/dev-manual/common-tasks.html#recipe-logging-mechanisms 官方文档里有输出调试信息的方法。包含两种&#xff0c;一种是调用python的&#xff0c;一种是bash的。 建议直接使用warning方法&#xff0c;保证输出级别足够。 另外&#xff0c;在…...

Ways to Encrypt Password on Server

Background: the history of store password in server, starts with plain text, to MD5, SHA-1, SHA-2, to add salt/pepper/multihashing, to bcrypt/Argon2id etc. Best way so far to encrypt password on server : use bcrypt(unless have specific reasons not to do...

IntentService源码分析指南

转载链接&#xff1a;https://www.jianshu.com/p/8a3c44a9173a...

为啥集群小文件治理那么重要,你真的懂吗?

小文件是 Hadoop 集群运维中的常见挑战&#xff0c;尤其对于大规模运行的集群来说可谓至关重要。如果处理不好&#xff0c;可能会导致许多并发症。Hadoop集群本质是为了TB,PB规模的数据存储和计算因运而生的。为啥大数据开发都说小文件的治理重要&#xff0c;说HDFS 存储小文件…...

promise

promise是es6 中专门用来处理异步回调的&#xff0c;可以解决回调地狱 promise是一个构造函数&#xff0c;这个构造函数中放一个回调函数作为参数&#xff0c;这个回调函数中放的是异步的操作&#xff0c; 对于一个异步操作来说执行是需要时间的&#xff0c;所以一开始promise是…...

Flink大数据实时计算系列-第一个程序JAVA版本-分组统计

Flink大数据实时计算系列-第一个程序JAVA版本-分组 在基线版本上增加了分组统计的代码 #Flink代码 package com.flinkniu.flink.operator;import org.apache.flink.api.common.typeinfo.Types; import org.apache.flink...

boost::geometry::model::multi_polygon用法的测试程序

boost::geometry::model::multi_polygon用法的测试程序 实现功能C++实现代码实现功能 boost::geometry::model::multi_polygon用法的测试程序 C++实现代码 #include <algorithms/area/test_area.hpp> #include <boost/geometry/geometries/geometries.hpp> #inc…...

Ant Design Vue实现a-table表格单元格合并

Ant Design Vue实现a-table表格单元格合并 参考Ant design Vue官网关于行和列合并api https://antdv.com/components/table-cn/ 下面官网对表格合并这块的描述 &#xff01;&#xff01;&#xff01;注意注意注意重要事情说三遍&#xff1a;很多同学都习惯性的将columns写在d…...

【CoppeliaSim】Solidworks中模型导出模型到V-REP

一、下载安装插件 插件名称&#xff1a;sw2urdfSetup 下载地址&#xff1a;https://github.com/ros/solidworks_urdf_exporter/releases/tag/1.6.0 下载后直接安装即可。安装成功后&#xff0c;可在SolidWorks的菜单栏中看到&#xff1a;工具-Tools-Export as URDF 二、导出…...

css中id和class的区别

css中id和class的区别ID是唯一的类不是唯一的语法区别ID是唯一的 每个元素仅可以有一个ID每个页面仅可以有一个元素拥有这个ID 类不是唯一的 你可以在多个元素中使用相同的类你可以使用多个类在一个元素中 语法区别 id对应css是用样式选择符“#”&#xff08;井号&#xff…...

程序员如何快速成长

如何快速成长 每个程序员都是从菜鸟成长过来&#xff0c;我自己也不例外。以下是我个人一些总结和结合网上别人的经验&#xff0c;希望对大家有帮助&#xff01; 主动学习 保持危机感 35岁后你能做什么&#xff1f;为何同龄人已经是行业专家&#xff1f; 对知识保持好奇心 多…...

力扣刷题:动态规划篇

目录322. 零钱兑换题目介绍题目实现5. 最长回文子串题目介绍题目实现518. 零钱兑换 II题目介绍题目实现53. 最大子序和题目介绍题目实现63. 不同路径 II题目介绍[62. 不同路径](https://leetcode-cn.com/problems/unique-paths/)题目实现70. 爬楼梯题目介绍题目实现72. 编辑距离…...

Java面试list 和 set 区别

List和Set的区别 List:&#xff1a;有序&#xff0c;按对象进入的的序保存对象&#xff0c;可可允许多个Null元素对象&#xff0c;可以使用lterator迭取出所有元素。在逐一便历&#xff0c;也可以使用get(int index)获取指定下标的元素 Set&#xff1a;无序&#xff0c;不可重复…...

redis的N种集群方式

公众号&#xff1a;jvm知识库 1.主从复制 主从复制原理&#xff1a; 从服务器连接主服务器&#xff0c;发送SYNC命令&#xff1b; 主服务器接收到SYNC命名后&#xff0c;开始执行BGSAVE命令生成RDB文件并使用缓冲区记录此后执行的所有写命令&#xff1b; 主服务器BGSAVE执…...

微服务 分布式配置中心Apollo

微服务 分布式配置中心Apollo概览什么是配置什么是配置中心Apollo简介Apollo入门案例Apollo应用Apollo应用于分布式系统概览 什么是配置 先考虑几个问题 什么是配置&#xff0c;为什么需要配置&#xff0c;配置有哪些特点&#xff1f; 揭晓答案 配置就是应用程序在启动和运行…...

transition

transition ①transition&#xff1a; 包裹需要过渡的元素/组件,transition只会把过渡的效果应用到其包裹的内容上,而不会额外渲染DOM元素,也不会出现在可被检查的组件层级中。 ②transition元素的属性: (1)name -string&#xff0c;用于自动生成CSS过度类名。例如&#xff1…...

介绍vuex

vuex是一个仓库&#xff0c;是vue的状态管理工具&#xff0c;存放公共数据&#xff0c;任何组件都可以使用vuex里的公共数据 vuex是vue的状态管理工具 状态指的就是数据 1、state - 存放Vuex store实例的状态对象&#xff0c;用于定义共享的数据。 2、Action - 动作&#xff…...

promise

promise是es6 中专门用来处理异步回调的&#xff0c;可以解决回调地狱 promise是一个构造函数&#xff0c;这个构造函数中放一个回调函数作为参数&#xff0c;这个回调函数中放的是异步的操作&#xff0c; 对于一个异步操作来说执行是需要时间的&#xff0c;所以一开始promise是…...

基于LSTM模型的MNIST分类

设置RNN的参数 这次我们使用RNN来进行分类的训练&#xff0c;继续使用手写数字MNIST数据集。让RNN从每张图片的第一行像素读到最后一行&#xff0c;然后再进行分类判断。接下来导入MNIST数据并确定RNN的各种参数&#xff1a; import tensorflow as tf from tensorflow.example…...

Java高级(十一)

Java高级&#xff08;十一&#xff09;一、缓冲流1.1概述1.2字节缓冲流字节缓冲输出流字节缓冲输入流1.3字符缓冲流字符缓冲输出流字符缓冲输入流二、转换流2.1字符编码和字符集字符编码字符集2.2 InputStreamReader类2.3OutputStreamWriter类三、序列化3.1概述3.2ObjectOutput…...

hashcode与HashMap

hashcode是对象在hash表中对应的位置. 而hash可能会发生hash冲突,所以可能存在不同对象hashcode是相同的. class Solution {public static void main(String[] args) {Integer a 223;Integer b 223;System.out.println(a b);System.out.println(a.hashCode() b.hashCode()…...

vmmap分析内存泄露问题

vmmap是sysinternals工具集中的一个工具&#xff0c;主要用于分析一个进程的虚拟内存和物理内存的使用情况。更有效的是&#xff0c;可以通过对比两个不同时间的内存使用情况的Snapshot&#xff0c;来查找内存泄露问题。 vmmap介绍 当你用vmmap去查看一个正在运行的进程的时候…...

图谱问答-句子向量模型部署项目总结(未完)

内容来自七月算法nlp课程。 文章目录1 句子向量1.1 bert句子向量表示相似度效果不好1.2 sentence-bert1 句子向量 句子向量是用于实体消岐的。可以使用Elmo&#xff0c;也可以使用bert。这里介绍用bert生成句子向量。 1.1 bert句子向量表示相似度效果不好 Bert中最常用的句向…...

手工制作高精度电子秤(非常详细)

手工制作高精度电子秤&#xff08;非常详细&#xff09;电子秤简介传感器说明AD检测模块数值转换支架安装接线说明校准总结原文链接&#xff1a;https://www.yourcee.com/newsinfo/2923641.html 电子秤简介 这篇DIY电子秤的文章我会尽量详细的写&#xff0c;我们先来简单了解…...

DIY显示器+亚克力板制作外壳

前言 上个月&#xff0c;我重启了DIY显示器的这个想法。 于是&#xff0c;我买了显示器面板&#xff0c;驱动板&#xff0c;一些螺丝&#xff0c;以及几块亚克力板&#xff0c;由于我对屏幕的大小以及外壳要做的大小没有什么概念&#xff0c;加上我不会CAD&#xff0c;所以&a…...

嵌入式DIY电子时钟(有报时和定时)

我相信电工类的专业&#xff0c;对于单片机这个老东西是很熟悉的。下面。是我YID的一个电子时钟&#xff0c;包含了一个时钟的基本功能&#xff0c;定时和报时。&#xff08;如果没有C51和单片机的基础知识可以先看看&#xff09;话不多说。这来上来了&#xff1a;要资料点击这…...

真·电子二胡 (ESP32配合库乐队APP实现的电子制作)

简介&#xff1a; 本项目是使用ESP32模块实现的一个电子二胡&#xff0c;可以连接手机库乐队在手机上演奏音乐 演示视频&#xff1a; 自制【电子】二胡&#xff0c;演奏二泉映月软件原理图&#xff1a; 核心元器件是16个机械键盘的按键和一个EC11编码器。这是完整的原理图&…...

【电子DIY】基于NE555制作的简易电子琴

基于NE555制作的简易电子琴 青岛科技大学 信息科学技术学院 集成162 Listen C 一&#xff0e;背景简介 自多次利用51单片机无源蜂鸣器制作电子琴多次以后&#xff0c;突然领悟蜂鸣器产生声波的原理&#xff0c;无非是产生一定频率占空比50%的PWM而已。然后&#xff0c;联想…...

我们一起来DIY一个电子秤吧

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 人工智能编程入门博客 一个专注于嵌入式知识分享&#xff0c;学习路上不迷路的公众号&#xff0c;欢迎关注。 想加技术交流群的&#xff…...

DIY电子相框

准备以下东西&#xff1a; 1、IPAD3 显示屏套件&#xff0c;包括IPAD3高清显示屏&#xff08;20481536&#xff09;&#xff0c;EDP驱动板&#xff0c;按键板&#xff0c;屏线&#xff0c;HDMI线 2、12V电源适配器&#xff0c;1A以上电流输出 3、10寸照片相框,必须带卡纸&…...

电子DIY记录

从零开始电子DIY&#xff01;一、认识常用元器件二、看懂原理图三、PCB电路板设计和打样一、认识常用元器件 1.项目中一般会有列出所有元器件的BOM表 2.元器件可以在立创商城购买 3.判断元件的种类 1&#xff09;BOM表第一栏为元件的名称&#xff0c;一般为元件的值2&#…...

【windows脚本】以管理员身份运行 windows脚本

环境 系统&#xff1a;win10_x64 概述 1、windows脚本运行往往需要管理员权限&#xff0c;如何通过代码来实现该功能&#xff1f; 脚本代码 ECHO OFF setlocal EnableDelayedExpansion color 3e title 添加服务配置PUSHD %~DP0 & cd /d "%~dp0" %1 %2 mshta v…...

vscode 管理员权限 运行终端

Visual Studio Code图标 -> 鼠标右键 -> 属性 -> 兼容性 -> 以管理员身份运行此程序打勾&#xff0c;然后确定就可以了...

Nsis 始终用管理员权限运行问题

解决问题&#xff1a; 程序安装后&#xff0c;通过桌面快捷方式运行程序时不需要再右键选择管理员身份运行。 在如下位置添加 Section "test"这一段代码&#xff0c;其中programe.exe&#xff0c;为要执行的主程序的名称 Name "${PRODUCT_NAME} ${PRODUCT_VER…...

C#程序设置以管理员权限运行

有些代码操作需要取得管理员权限&#xff0c;不如把整个程序设置为以管理员运行。 C#程序设置以管理员权限运行&#xff0c;比较简单&#xff1a; 1. 为项目添加manifest文件&#xff08;已添加的则跳过&#xff09;。 2. requestedExecutionLevel 设置为 requireAdministr…...

.bat文件请求以管理员权限运行

有些指令或文件需要管理员权限进行修改&#xff0c;如何在bat文件中请求用户授予管理员权限&#xff1f; 代码如下&#xff1a; echo off %1 mshta vbscript:CreateObject("Shell.Application").ShellExecute("cmd.exe","/c %~s0 ::","&…...

部署在IIS上的网站程序以管理员权限运行 设置方法

描述 部署在IIS上的网站程序&#xff0c;代码涉及调用CMD&#xff0c;安装windows服务&#xff0c;需管理员权限。 设置步骤 点击应用程序池 在你使用的程序池 处右键选择高级设置 在进程模型——标识&#xff0c;点击右侧的三个点。 在弹出的应用程序池标识 选项框中&#…...

Win10如何关闭管理员权限运行

在运行电脑上某些功能的时候&#xff0c;我们需要打开电脑管理员权限&#xff0c;很多小伙伴也都知道怎么操作。那么如果电脑默认开启管理员权限的情况下&#xff0c;又怎么关闭它呢&#xff1f;下面就和大家来聊聊Win10如何关闭管理员权限吧。 更多系统教程尽在小白系统重装官…...

如何以管理员权限运行任务

一 前言 每次执行cmd任务时&#xff0c;涉及到需要提权的操作&#xff0c;都要重新以管理员运行的方式来打开cmd来获取管理权限。经常需要提权操作时就比较招人烦&#xff0c;如何从一开始winr 打开任务运行框&#xff0c;输入cmd就能自动具备管理员权限呢&#xff1f;&#xf…...

计算机管理员怎么开通,管理员权限怎么设置

管理员权限可以说是很大的一种权限了&#xff0c;但是对于管理员权限怎么设置很多人并不是很了解&#xff0c;下面就针对win7来介绍一下怎么查看用户是不是管理员。管理员权限怎么设置?如何查看用户是不是管理员?首先打开“开始->控制面板”&#xff0c;在控制面板中选择“…...

C#程序以管理员权限运行

C#程序以管理员权限运行 在Vista 和 Windows 7 及更新版本的操作系统&#xff0c;增加了 UAC(用户账户控制) 的安全机制&#xff0c;如果 UAC 被打开&#xff0c;用户即使以管理员权限登录&#xff0c;其应用程序默认情况下也无法对系统目录、系统注册表等可能影响系统正常运行…...

PowerShell 设置以管理员权限运行

PowerShell 设置以管理员权限运行PowerShell 默认不是以管理员权限运行&#xff0c;通过下面的方法可以让powershell始终以管理员权限运行。方法/步骤 搜索PowerShell&#xff0c;如下图所示。 在图标上右键选择“打开文件位置“。 将PowerShell复制到桌面。 在桌面的Pow…...

管理员权限运行cmd

1.键盘按下“winR”&#xff0c;弹出运行窗口&#xff0c;在里面输入“cmd”。 这时我们已经进入普通的cmd模式&#xff0c;如何进入管理员cmd呢&#xff1f; 2.接下来输入&#xff1a;runas /user:administrator cmd 系统默认用户名是administrator&#xff0c;登录需要知道…...