Vue cli中模式和环境变量

news/2024/7/1 5:18:33

Vue CLI 项目有三个模式:

  • development模式   开发环境
  • test模式   测试环境
  • production模式   生产环境

可在构建命令中使用开发环境变量:(使用其他环境同理,改变development即可)

vue-cli-service build --mode development

NODE_ENV 将决定您的应用运行的模式,是开发,生产还是测试。

环境变量:

项目根目录中放置下列文件来指定环境变量:

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对:

# 开发
VUE_APP_BASE_API = '/dev'

注意:变量只能以以下三种形式作为开头:

NODE_ENV
BASE_URL 
VUE_APP_

 被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用

定义之后,如何访问呢?

可以在你的代码任何一个地方使用 process.env来获取环境变量 !因为process是Nodejs提供的一个全局变量,它会根据你当前的环境,自动读取你先前定义,对应的环境变量文件中的内容 如.env.development里面的所有内容。无需引入

console.log(process.env.VUE_APP_BASE_API)    //'/dev'

使用场景: 

常常在项目中使用proxy代理时,将静态的target值指向一个环境变量,后期维护或当后端服务器地址变化时更改方便,只需在对应的.env文件中需改环境变量的值即可,无需更改原本的代码。


http://lihuaxi.xjx100.cn/news/1386467.html

相关文章

【ARM 常见汇编指令学习 5 -- arm64汇编指令 wzr 和 xzr】

文章目录 ARM64 zero registerARMv8 zero 寄存器的背景xzr 在寄存器读写操作中的使用 上篇文章:ARM 常见汇编指令学习 4 – ARM64 比较指令 cbnz 与 b.ne 区别 下篇文章:ARM 常见汇编指令学习 6 - bic(位清除), orr(位或), eor(异或) ARM64 zero registe…

二叉树的层序遍历(两种方法:迭代+递归)

题目: 给你二叉树的根节点 root ,返回其节点值的 层序遍历 。 (即逐层地,从左到右访问所有节点)。 输入:root [3,9,20,null,null,15,7] 输出:[[3],[9,20],[15,7]] 解题思路:迭代法…

小狐狸ChatGPT付费创作系统V2.1.0全开源版(vue全端)

小狐狸GPT付费体验系统最新版系统是一款基于ThinkPHP框架开发的AI问答小程序,是基于国外很火的ChatGPT进行开发的Ai智能问答小程序。当前全民热议ChatGPT,流量超级大,引流不要太简单!一键下单即可拥有自己的GPT!无限多…

SAP财务系统中的“增值税”

1. 前言 在前一篇博客《SAP财务系统中的“复式记账法”》中,介绍了复式记账的基本原理,同时给出了在采购和销售流程中常见的记账科目,但也遗留了一些知识点,例如增值税等概念。 在本篇博客中,我们将覆盖这些知识点&a…

Python版day60

84. 柱状图中最大的矩形 给定 n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。 求在该柱状图中,能够勾勒出来的矩形的最大面积。 class Solution:def largestRectangleArea(self, heights: List[int]) -> i…

简单动态库调用CMakeLists配置

1. 动态库生成 fun.h和fun.cpp int my_add(int a, int b); #include "fun.h" int my_add(int a, int b) {return a b; } 动态库生成的CMakeLists.txt cmake_minimum_required(VERSION 3.14) set(CMAKE_DEBUG_POSTFIX "d") project(funso) set(SRC_ f…

const的用法

目录 const的基本理解 C和C中const的区别 代码段 不初始化or初始化 常变量or常量 编译方式 备注开发环境:vscode通过ssh连接虚拟机中的ubuntu,ubuntu-20.04.3-desktop-amd64.iso const的基本理解 const修饰的变量不能作为左值 const修饰的变量初…

信息安全战线左移!智能网联汽车安全亟需“治未病”

当汽车由典型的工业机械产品逐步发展成为全新的智能移动终端,汽车的安全边界发生了根本性改变,信息安全风险和挑战不断增加。 面对复杂的异构网络、异构系统及车规级特异性要求,智能智能网联汽车信息安全到底要如何防护,已经成为…