解析vue中的process.env

这篇具有很好参考价值的文章主要介绍了解析vue中的process.env。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、介绍

1、process

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

2、process.env

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

3、dotenv

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

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

解析vue中的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中找到配置
解析vue中的process.env

在main.js入口文件中打印

console.log(process.env);

解析vue中的process.env

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

模式

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

解析vue中的process.env
也就是说,在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

解析vue中的process.env

在根目录下创建文件

解析vue中的process.env

NODE_ENV = production

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

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

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

解析vue中的process.env

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

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

解析vue中的process.env文章来源地址https://www.toymoban.com/news/detail-459593.html

到了这里,关于解析vue中的process.env的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 process.env.XXX环境变量不生效

    问题:使用process.env.XXX时获取不到环境变量的值: axios.defaults.baseURL = process.env.VUE_APP_BASE_API; 解决: 一:项目根目录下的.env.development和.env.production环境配置文件中,NODE_ENV= development 的值必须和package.json文件启动配置--mode一致 二:.env.development和.env.production环境配置文件中变

    2024年02月11日
    浏览(36)
  • 关于process.env.VUE_APP_BASE_URL的使用

    process.env.VUE_APP_BASE_URL 是一个 Vue.js 中使用的环境变量,通常用来存储一个应用的接口请求地址,例如 API 服务器的地址等。           在 Vue CLI 3 以上的版本中,当你在项目根目录下创建一个名为 .env. [mode] 的文件;其中 [mode] 是你的模式名称,例如 .env.development ,并在其

    2024年02月16日
    浏览(47)
  • nodejs:非docker下设置NODE_ENV

    参考:         使用process.env.NODE_ENV的正确姿势 - 掘金

    2024年02月13日
    浏览(44)
  • Vue+Nodejs 使用WebSocket创建一个简易聊天室

    使用vue编写前端页面,nodejs处理服务端消息,WebSocket进行实时通信 1.客户端 2. 服务端 使用的是nodejs

    2024年02月16日
    浏览(31)
  • process.env.npm_config_argv的值3个参数remain、cooked、original什么含义

    在使用Webpack进行打包时,判断 process.env.npm_config_argv 的值通常是为了根据命令行参数来决定打包的行为。 process.env.npm_config_argv 是一个环境变量,保存了当前运行的npm命令和其参数。 具体而言, process.env.npm_config_argv 的值是一个JSON字符串,其中包含了命令行参数的详细信息。

    2024年02月15日
    浏览(28)
  • Nodejs 第十四章(process)

    process 是Nodejs操作当前进程和控制当前进程的API,并且是挂载到globalThis下面的全局API API 介绍 1. process.arch 返回操作系统 CPU 架构 跟我们之前讲的os.arch 一样 \\\'arm\\\' 、 \\\'arm64\\\' 、 \\\'ia32\\\' 、 \\\'mips\\\' 、 \\\'mipsel\\\' 、 \\\'ppc\\\' 、 \\\'ppc64\\\' 、 \\\'s390\\\' 、 \\\'s390x\\\' 、以及  \\\'x64\\\' 2. process.cwd() 返回当前的工作目

    2024年02月10日
    浏览(24)
  • Vue3+NodeJS 接入文心一言, 发布一个 VSCode 大模型问答插件

    目录 一:首先明确插件开发方式 二:新建一个Vscode 插件项目 1. 官网教程地址 2. 一步一步来创建 3. 分析目录结构以及运行插件 三:新建一个Vue3 项目,在侧边栏中展示,实现vscode插件 = vue项目 双向消息传递 1. 新建vue3+vite+ts项目 2. 将web页面展示在vscode侧边栏 (1) 插件项目

    2024年02月04日
    浏览(28)
  • Jenkins 安装 NodeJS 插件后无法识别Node环境:env node No such file or directory

    经验证,该问题在使用Jenkins官方文档中推荐的docker镜像 jenkinsci/blueocean 才会出现。 改用最新的Jenkins docker镜像就不会遇到: 我安装的是最新的Jenkins docker镜像: 然后运行镜像: 注意 docker run 时,镜像名为 jenkins/jenkins:lts ,而不是 jenkins/jenkins 。两者不同。 为什么 jenkinsci/blu

    2024年02月07日
    浏览(37)
  • vane 一个适用于前端打工人的全栈框架,nodejs+vue3+typescript

    写这个的初衷是因为每次用node写接口的时候总是需要一些写大一堆的东西, 也有些人把很多接口都放在一个js文件内, 看起来很是杂乱, 后来用到nuxt写的时候, 感觉用文件名来命名接口路径很是方便, 无论是query参数还是params参数,都可以通过文件名来命名, 也可以通过文件夹层级

    2024年02月11日
    浏览(38)
  • 发现一个开源的Chatgpt-web应用,前端使用vue编写,后端也是nodejs代码编写的。

    演示视频: https://www.bilibili.com/video/BV1WC4y1k7j5/?vd_source=4b290247452adda4e56d84b659b0c8a2 【chatglm3】(10):使用fastchat本地部署chatlgm3-6b模型,并配合chatgpt-web的漂亮界面做展示,调用成功,vue的开源项目 部署脚本和方法: https://gitee.com/fly-llm/dify-mysql-llm/tree/master/fastchat-docker-compose ht

    2024年02月11日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包