解析vue中的process.env

news/2024/11/9 2:20:25/

一、介绍

1、process

process是 nodejs 下的一个全局变量,它存储着 nodejs 中进程有关的信息。

2、process.env

env 是 environment 的简称,process.env属性返回一个包含用户环境的对象。

3、dotenv

Dotenv 是一个零依赖的模块,它能将环境变量中的变量从 .env 文件加载到 process.env 中。

在终端中输入node进入node环境再输入process.env,可以打印出信息如下图:

在这里插入图片描述

二、使用

1、在nodejs中使用

1、安装

npm install dotenv

2、根目录下创建 .env 文件

HOST = localhost
PORT = 8080

3、入口文件中引入 dotenv 并使用

require("dotenv").config({path: '.env'})
console.log(process.env.HOST); // localhost
console.log(process.env.PORT); // 8080

2、在vue中使用

在使用脚手架创建项目的时候,会自动安装dotenv,可以从package-lock.json中找到配置
在这里插入图片描述

在main.js入口文件中打印

console.log(process.env);

在这里插入图片描述

可以看出,默认的模式是development即开发模式。

模式

官网描述如下:https://cli.vuejs.org/zh/guide/mode-and-env.html

在这里插入图片描述
也就是说,在Vue中, NODE_ENV 可以通过 .env 文件或者.env.[mode]文件配置。配置过后,运行 Vue CLI 指令( npm run dev(serve) ,npm run build )时,就会将该模式下的NODE_ENV载入其中了。而这些命令,都有自己的默认模式:

  • npm run dev(serve) ,其实是运行了 vue-cli service serve ,默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV
  • npm run build ,其实运行了 vue-cli service build ,默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV

在这里插入图片描述

在根目录下创建文件

在这里插入图片描述

NODE_ENV = production

注意:只有 NODE_ENVBASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

NODE_ENV = development
VUE_APP_BASE_API = 'http://localhost:8099/'

再打印 process.env的信息如下:

在这里插入图片描述

注意:.env 环境文件是通过运行 vue-cli-service 命令载入的,因此环境文件发生变化,你需要重启服务

除了以上的修改方式外,也可以在命令后直接使用--mode参数手动指定模式。

在这里插入图片描述


http://www.ppmy.cn/news/35925.html

相关文章

【Nginx】Nginx 常用的基础配置

文章目录一、基础配置二、隐藏 Nginx 版本信息三、禁止ip直接访问80端口四、启动 web 服务 (vue 项目为例)五、PC端和移动端使用不同的项目文件映射六、一个web服务,配置多个项目 (location 匹配路由区别)七、配置负载均衡八、SSL 配置 HTTPS一、基础配置 user …

uniapp - APP云打包、蒲公英平台发布APP的步骤

一、uniapp 云打包 1、注册 dcloud 开发者 首先需要注册一个 dcloud 开发者的账号 dcloud开发者中心:登录 (dcloud.net.cn) 根据流程注册即可。 2、云打包(已安卓为例) 项目创建完成后,查看 dcloud 开发者中心,看是否…

kaggle注册以及数据集下载全流程

kaggle官网:Kaggle Competitions 目录 一、注册 二、数据集如何下载: 1.第一步,登录进入kaggle网站,导航栏search里搜索自己要下载的数据集 2.第二步,在网站右上角个人中心头像那里点击进去account ​3.第三步&a…

突然裁员1/3,原因竟是算法判定员工“不敬业且效率低”?

今天,一个“AI裁员”的话题上了知乎热搜: 据统计,这家名叫 Xsolla 的俄罗斯公司已经用AI裁掉了大约三分之一的员工。 对于这种充满争议的反常举动,一些知乎er已经开始了合理“阴谋论”: “这算个P的AI,无非…

毕业设计——基于小程序云开发的校园二手交易平台(附源码)

本系统基于微信小程序云开发,采用小程序原生框架,不需要后端开发,数据库和CMS云开发全帮你搞定,对后端开发能力薄弱的同学超友好的有木有,只要你学过HTMLCSSJS就能实现所有功能。 一、功能介绍 使用该系统的角色有两…

Unity IL2CPP 游戏分析入门

一、目标 很多时候App加密本身并不难,难得是他用了一套新玩意,天生自带加密光环。例如PC时代的VB,直接ida的话,汇编代码能把你看懵。 但是要是搞明白了他的玩法,VB Decompiler一上,那妥妥的就是源码。 U…

Python实战,爬取金融期货数据

大家好,我是毕加锁。 今天给大家带来的是 Python实战,爬取金融期货数据 文末送书! 文末送书! 文末送书! 任务简介 首先,客户原需求是获取https://hq.smm.cn/copper网站上的价格数据(注:获取的是…

reposync命令详解--reposync同步aliyunyum库到本地

参考: reposync - 命令 - -桃枝夭夭- - 博客园 0. 简介 reposync 命令简单来说就是可以把指定外网源(repo id)的包同步到本地文件中 1. 安装 reposync 命令 [rootV10SP1-1 ~]# yum install -y dnf-plugins-core2. 常用选项以及参数 选项含义-c [fil…