process.env

简介

process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看。process.env属性返回一个对象，包含了当前Shell的所有环境变量。简单来说就是你在配置文件 package.json配置webpack的环境变量都可以通过process.env来获取到

比如，process.env.HOME返回用户的主目录。 NODE_ENV 是其中的一个环境变量。这个变量主要用于标识当前的环境（生产环境，开发环境）。默认是没有这个环境变量的，需要自己手动配置。

示例

在启动命令上加的变量都可以通过process.env来获取

// An highlighted block
  "scripts": {
    
    "dev": "vue-cli-service serve",
    "dev:test": "cross-env VUE_APP_TARGET=http://172.16.200.225:8080/mes-api vue-cli-service serve",
    "dev:prot": "cross-env VUE_APP_BRANCH=port VUE_APP_TARGET=http://172.16.200.225:8081/mes-api vue-cli-service serve",
  },

使用cross-env

在webpack项目里，我们可以通过设置package.json来实现，但是Windows 系统和Mac系统有区别。

//windows系统
  "scripts": {
    
    "dev": "vue-cli-service serve",
    "dev:test": "set VUE_APP_TARGET=http://172.16.200.225:8080/mes-api vue-cli-service serve",
    "dev:prot": "set VUE_APP_BRANCH=port VUE_APP_TARGET=http://172.16.200.225:8081/mes-api vue-cli-service serve",
  },

//mac系统
{
    
  "scripts": {
    
    "dev": "export NODE_ENV=development && webpack-dev-server --open --hot",
    "build": "export NODE_ENV=production && --progress --hide-modules"
  }
}

那么问题又来了，我在Windows 开发部署的项目，可能在 Mac 系统无法正常打包，反之亦然。为了解决这个问题，有人就开发了 cross-env。

cross-env是一个跨平台设置环境变量的第三方包，它可以让你只配置一行命令，就能轻松地在多个平台设置环境变量。首先先安装，然后配置package.json

npm install --save-dev cross-env 
// package.json
{
    
  ...
  "scripts": {
    
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --mode=production --progress --hide-modules"
  },
}

博客原文地址：https://blog.csdn.net/qq_44376306/article/details/122554570