Vue中process.env关键字，process.env.VUE_APP_BASE_API

news2024/11/26 4:32:21

1.process.env 是Node.js 中的一个环境

打开命令行查看环境：

2.process.env与Vue CLI 项目

Vue Cli 有以下三种运行模式

  • development 模式用于 vue-cli-service serve

  • test 模式用于 vue-cli-service test:unit

  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

我们查看package.json配置信息，运行Vue CLI命令：

  • 开发环境运行npm run dev，

  • 要部署服务器发布生产环境时运行npm run build，

他们正好对应Vue CLI中的development模式和production模式，就会把该模式下的NODE_ENV载入其中了。

既然知道项目运行的是那个模式，是不是我们就可以在不同模式下运行不同的变量信息，如开发环境使用端口8080，线上（生产）环境的端口是80，这个时候你会想，我知道不同模式配置不同信息，那信息配置在那个文件呢？

1）可以在你的项目根目录中放置下列文件来指定环境变量：
.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

会有先后顺序

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

#设置端口号
port=9999
# 开发环境配置
ENV = 'development'

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中

2）.env 文件配置
.env：全局默认配置文件，无论什么环境都会加载合并。
.env.development：开发环境的配置文件
.env.production：生产环境的配置文件

注意文件名是固定的，不要自定义。

属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX

vue 会根据启动命令自动加载相对应的环境配置文件。vue是根据文件名进行加载的，所以不要擅自更改。

  • 比如执行npm run serve命令，会自动加载.env.development文件

  • 开发环境加载 .env 和 .env.development 。

  • 生成环境加载 .env 和 .env.production 。

运行npm run serve的时候主要还是看package.json中 server属性的--mode后面跟的是啥。如果是development，就会加载.env.development文件。

  • vue-cli-service 默认会读取 env.development文件 ；

  • vue-cli-service - -mode dev 指定读取env.dev文件；

在package.json里面配置好，执行serve的时候用开发环境的。build打包用生产或者测试的

package.json 配置项：

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "build:sit": "vue-cli-service build --mode production.sit",
    "build:uat": "vue-cli-service build --mode production.uat",
    "build:prod": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint",
    "et": "node_modules/.bin/et",
    "et:init": "node_modules/.bin/et -i",
    "et:list": "gulp themes"
  }

环境配置文件 > 全局配置文件

当全局的配置文件和环境的配置文件有相同配置项时，环境的配置项会覆盖全局的配置项。

也就是全局的配置文件.env 文件会覆盖 .env.development这些。

在配置文件中定义的属性在其它文件中如何访问：

可以使用 process.env.xxx 来访问属性

3.process.env 用来做什么

由于我们的项目需要在不同环境下进行运行(开发，生产，测试等)，这避免我们需要多次的去切换请求的地址以及相关的配置，vue-cli2是可以直接在config文件中进行配置的，但是vue-cli4和vue-cli3已经简化了，没有config文件怎么办？

1）建立.env系列文件

首先我们在根目录新建3个文件，分别为.env.development，.env.production，.env.test

（注意文件是只有后缀的）。

.env.development 模式用于serve，开发环境，就是开始环境的时候会引用这个文件里面的配置
.env.production模式用于build，线上环境。
.env.test 测试环境

4.development模式运行

在项目根目录创建.env.development

.env.development文件内容

# 开发环境配置
ENV = 'development'

#设置端口号
port=8081

# 前端请求路径
VUE_APP_BASE_API = '/api'

#后端服务器地址不要忘记添加http或https
BASE_URL_REAR='http://127.0.0.1:8080/'

vue.config.js配置如下

process.env当前运行的配置环境，用于读取对应配置文件的参数

//提示：process.env 是Node.js 中的一个环境，Vue CLI 项目中一个重要的概念
//:有以下三种运行模式
// development 模式用于 vue-cli-service serve
// test 模式用于 vue-cli-service test:unit
// production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
//当配置中有，配置port端口则使用配置的端口反之使用80端口
const port = process.env.port || 80 // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
//build后的输出目录
outputDir: 'dist',
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
lintOnSave: false,
configureWebpack: {
// devtool 添加这个debugger可以看源码
devtool: 'cheap-module-source-map'
},
// webpack-dev-server 相关配置
devServer: {
//本机地址
host: 'localhost',
//获取port端口
port: port,
open: true,
//如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
//process.env.VUE_APP_BASE_API的参数会读取对应环境变量数据，如读取的数据是‘/api’,那么意思就是前端请求的/api路径都会被带来到，参数target的地址
[process.env.VUE_APP_BASE_API]: {
//代理的路径
target: process.env.BASE_URL_REAR,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
},
};

以上配置主要是为了，前端应用和后端 API 服务器没有运行在同一个主机上需要做代理为例。

运行 npm run dev 使用到的配置文件为.env.development

配置文件的端口，请求路径，后端服务器地址配置等

网页可以看出端口

可能请求接口也拼接了配置路径中的VUE_APP_BASE_API变量数据

5.定义自己配置环境

因为我们知道了配置环境的定义，那么只要我们遵循规则定义也可以配置自己的环境数据

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

我们在根路径添加配置.env.itmei配置如下

# 自己定义的开发环境配置
ENV = 'itmei'
#设置端口号
port=8088
# 前端请求路径
VUE_APP_BASE_API = '/itmei-api'
#后端服务器地址
BASE_URL_REAR='http://127.0.0.1:8080/'

添加完成后只需要在运行命令添加--mode 配置文件.env.后面自己定义的名称

如我自己配置的.env.itmei配置名称的itmei，为了方便我们在package.json中配置运行脚本

配置了上面的就可以使用npm命令运行

当然也可以直接使用Vue Cli命令运行vue-cli-service serve --mode itmei

首先会去找配置文件.env.itmei、.env.itmei.local 和 .env文件然后构建出生产环境应用

如果此时运行VueCli命令mode 的环境名称不存在，首先会去找.env.itmei00或.env.itmei00.local 或.env如找到就能正常运行找不到就报错，由于我定义了.env所以后面就使用.env的配置信息

当我把.env删除，找不到会报

building 2/2 modules 0 active ERROR  TypeError: Cannot read property 'upgrade' of undefined
TypeError: Cannot read property 'upgrade' of undefined

参考自：https://blog.csdn.net/qq_45502336/article/details/125693697

https://www.cnblogs.com/ddqyc/p/15428194.html

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

pip安装教程 python（针对于Windows系统）

pip安装教程 python（针对于Windows系统）

1.什么是pip pip 是 Python 包管理工具，该工具提供了对Python 包的查找、下载、安装、卸载的功能。 目前如果你在 python.org 下载最新版本的安装包，则是已经自带了该工具。 pip 官网：https://pypi.org/project/pip/ 2.判断本机是否安装p…
阅读更多...
chatgpt赋能python：Python中如何将NaN变为0

chatgpt赋能python：Python中如何将NaN变为0

Python中如何将NaN变为0 Python是一种动态、强类型的编程语言，因其简单易学、功能强大，被广泛应用于各种领域。其中NumPy和Pandas是数据科学界最常用的Python库，而在数据处理中，处理缺失值通常是必不可少的。本文将介绍如何使用P…
阅读更多...
学成在线----day3

学成在线----day3

1、JSR303校验 对填入的数据自动做一些约束 package com.xuecheng.content.model.dto;import io.swagger.annotations.ApiModel; import io.swagger.annotations.ApiModelProperty; import lombok.Data;import javax.validation.constraints.NotEmpty; import javax.validati…
阅读更多...
PyCharm安装教程（2023年，3月）

PyCharm安装教程（2023年，3月）

下载PyCharm之前需要准备下载Python 链接：Python安装教程 一、PyCharm下载 1、进入JetBrains官网： 官网地址：https://www.jetbrains.com/ 2、点击【Developer Tools】 开发者工具，选择【PyCharm】点击跳转到PyCharm界面。点击…
阅读更多...
【Docker】 7.Docker Internet

【Docker】 7.Docker Internet

文章目录 Docker InternetDocker Internet CommandDocker Bridge Internetdocker Host InternetDocker Container InternetDocker None Internet Docker Internet Docker 网络架构采用的设计规范是CNM（Container Network Model）。CNM中规定了Docker网络…
阅读更多...
RK3588平台开发系列讲解（同步与互斥篇）自旋锁死锁实验

RK3588平台开发系列讲解（同步与互斥篇）自旋锁死锁实验

平台内核版本安卓版本RK3588Linux 5.10Android 12文章目录 一、自旋锁死锁二、实验程序的编写2.1、驱动程序编写2.2、编写测试 APP沉淀、分享、成长，让自己和他人都能有所收获！😄 📢自旋锁若是使用不当就会产生死锁，在本篇将会对自旋锁的特殊情况-死锁进行讲解。 一、自…
阅读更多...
0801详解-redux-react

0801详解-redux-react

文章目录 1 redux1.1 概述1.2 示例实现页面数字的加、减1.3 异步加-异步action 2 react-redux2.1 概述2.2 优化示例代码 3 数据共享4 redux开发者工具5 小结5.1 求和案例_redux精简版5.2 求和案例_redux完整版5.3 求和案例_redux异步action版5.4 求和案例_react-redux基本使用5…
阅读更多...
【哈士奇赠书活动 - 25期】-〖Python自动化办公应用大全（ChatGPT版） 〗

【哈士奇赠书活动 - 25期】-〖Python自动化办公应用大全（ChatGPT版） 〗

文章目录 ⭐️ 赠书 - 《Python自动化办公应用大全（ChatGPT版）》⭐️ 内容简介⭐️ 作者简介⭐️ 编辑推荐⭐️ 赠书活动 → 获奖名单 ⭐️ 赠书 - 《Python自动化办公应用大全（ChatGPT版）》 ⭐️ 内容简介 本书全面系统地介绍了P…
阅读更多...
使用YOLOv5实现图片、视频的目标检测

使用YOLOv5实现图片、视频的目标检测

推断的准备工作 接下来我将从官方代码开始，一步一步展示如何进行图片、视频识别 首先从GitHub下载官方代码（也可以从下面链接获取）： 链接：https://pan.baidu.com/s/16wzV899D90TY2Xwhx4TwhA 提取码：vzvj …
阅读更多...
MYSQL必知必会,详尽入门,一文帮你学会SQL必知必会

MYSQL必知必会,详尽入门,一文帮你学会SQL必知必会

目录 前言 数据库的概念和术语 SQL语言和组成 DDL show : 展示当前已有的数据库或者表 create ：创建一个数据库或者一个表 drop ：删除表、数据库对象或者视图 alter ：修改现有的数据库对象，例如 修改表的属性或者字段 (…
阅读更多...
geth下载安装配置环境及联盟链的搭建

geth下载安装配置环境及联盟链的搭建

以太坊概论考察课 更具课堂教学讲解，参考开放资料。使用所学的知识，创建项目并完成要求的内容。包含的功能和要求具体如下： 一：安装并运行geth客户端 1、下载安装geth 首先下载geth：https://geth.ethereum.org/dow…
阅读更多...
javaScript蓝桥杯---视频弹幕

javaScript蓝桥杯---视频弹幕

目录 一、介绍二、准备三、⽬标四、代码五、完成 一、介绍 弹幕指直接显现在视频上的评论，可以以滚动、停留甚⾄更多动作特效⽅式出现在视频上，是观看视频的⼈发送的简短评论。通过发送弹幕可以给观众⼀种“实时互动”的错觉，弹幕的出现让观…
阅读更多...
Segment Anything Model (SAM)——卷起来了，那个号称分割一切的CV大模型他来了

Segment Anything Model (SAM)——卷起来了，那个号称分割一切的CV大模型他来了

最近每天打开微信看到10个公众号里面差不多有11个都在各种玩赚chatGPT，每个都在说是各种大好风口，哎，看得眼睛都是累的。 今天下午无意间看到Meta发布了一款号称能分割一切的CV大模型，CV圈也开始卷起来，今年各种大模型…
阅读更多...
chatgpt赋能python：Python在图片处理方面的应用

chatgpt赋能python：Python在图片处理方面的应用

Python在图片处理方面的应用 在当今数字化的时代，图像处理已成为不可避免的技术。越来越多的业务需要对图片进行处理、识别和分析。Python是一种易于使用且适合处理图像的编程语言。Python中有许多图像处理库，例如Pillow、Scikit-Image和OpenCV等&#…
阅读更多...
基于BP神经网络的PID智能控制

基于BP神经网络的PID智能控制

基于BP神经网络的PID智能控制 基于BP神经网络的PID整定原理经典的增量式数字PID控制算法为：BP神经网络结构：学习算法仿真模型Matlab代码仿真效果图结论python仿真参考文献 基于BP神经网络的PID整定原理 PID控制要获得较好的控制效果，就必须通…
阅读更多...
山东大学单片机原理与应用实验 3.4 矩阵键盘扫描实验

山东大学单片机原理与应用实验 3.4 矩阵键盘扫描实验

目录 一、实验题目 二、实验要求 三、实验过程及结果记录 1. 在Proteus 环境下建立图1所示原理图，并将其保存为keyscan_self.DSN 文件。 2. 编写控制源程序，将其保存为keyscan_self.asm 或keyscan_self.c。 3. 将源程序添加到U1 中，并构…
阅读更多...
chatgpt赋能python：Python如何将空格变成换行

chatgpt赋能python：Python如何将空格变成换行

Python如何将空格变成换行 Python是一种流行的编程语言，有着许多实用的功能和库。在这篇文章中，我们将介绍如何使用Python将空格变成换行的方法。这是一种有用的技巧，可以帮助你在处理文本时更加方便。 为什么需要将空格变成换行 将空格变…
阅读更多...
eNSP数据抓包时弹不出Wireshark.exe

eNSP数据抓包时弹不出Wireshark.exe

文章目录 原因：wireshark的版本问题解决方法：操作例图 原因：wireshark的版本问题 上述2.6.6版本安装后，ensp工具路径正确，数据抓包也始终打不开wireshark，但是直接打开是可以打开的。安装3.6.3版本后&#…
阅读更多...
零基础使用ChatGPT写一个小游戏---文末附源码

零基础使用ChatGPT写一个小游戏---文末附源码

ChatGPT：赋能自然语言处理的多种应用领域 ChatGPT是当今最先进的人工智能对话系统之一，已经被证明可以支持许多不同的自然语言处理应用程序。以下是ChatGPT可以运行的几个领域： 聊天机器人 ChatGPT作为一个建立在自然语言处理技术上的人工…
阅读更多...
chatgpt赋能python：Python数据拟合

chatgpt赋能python：Python数据拟合

Python 数据拟合 在数据分析和机器学习领域，数据拟合是非常重要的一步。Python作为一种流行的编程语言，在数据拟合方面拥有强大的工具和库，因此被广泛使用。本文将介绍Python中常用的一些数据拟合方法，并演示如何使用它们。 线性…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023