process.env

.

brief introduction

process.env yes Node.js An environment object in . It holds the variable information of the system's environment . You can use Node.js The command line tool can directly view .process.env Property returns an object , Contains the current Shell All environment variables of . Simply put, you are configuring the file package.json To configure webpack All environment variables can be passed through process.env To get to the

such as ,process.env.HOME Return the user's home directory . NODE_ENV Is one of the environment variables . This variable is mainly used to identify the current environment （ Production environment , development environment ）. By default, there is no environment variable , Manual configuration required .

Example

Variables added to the startup command can be passed process.env To get

// 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",
  },

Use cross-env

stay webpack In the project , We can set package.json To achieve , however Windows Systems and Mac The system is different .

//windows System 
  "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 System 
{
    
  "scripts": {
    
    "dev": "export NODE_ENV=development && webpack-dev-server --open --hot",
    "build": "export NODE_ENV=production && --progress --hide-modules"
  }
}

So here comes the question , I am here Windows Develop deployed projects , May be in Mac The system cannot package normally , vice versa . To solve this problem , Someone developed cross-env.

cross-env It is a third-party package for setting environment variables across platforms , It allows you to configure only one line of commands , You can easily set environment variables on multiple platforms . Install first , Then configure 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"
  },
}

Original blog address ：https://blog.csdn.net/qq_44376306/article/details/122554570