前端Cross-env的应用

前言

在实际开发项目的时候，通常会遇到需要区分 开发环境、生产环境、测试环境，且不同的环境请求不同的接口API。切换到不同环境的时候需要改代码，有时忘记的话， 往往就会导致对应的环境出现问题。这个时候在项目中配置 环境变量 就可以有效避免这个问题。

Cross-env

它是运行跨平台设置和使用环境变量(Node中的环境变量)的脚本。

Github：官网

安装

xxxxxxxxxx
1
1
npm install --save-dev cross-env

使用

设置一个环境变量

xxxxxxxxxx
5
1
{
2
  "scripts": {
3
      "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
4
  }
5
}

通过cross-env设置了该环境下的环境变量：NODE_ENV值为production。因此最终，需要执行的命令是下面这段：

xxxxxxxxxx
1
1
webpack --config build/webpack.config.js

vue-cli2项目中，对应的脚本命令在wepack的相应文件中（示例中在 build/webpack.config.js里）

在vue-cli3中，执行的脚本命令为：vue-cli-service build，因此，在vue-cli3项目中，配置如下：

xxxxxxxxxx
5
1
{
2
  "scripts": {
3
      "build": "cross-env NODE_ENV=production vue-cli-service build"
4
  }
5
}

访问NODE_ENV环境变量：

xxxxxxxxxx
1
1
console.log(process.env.NODE_ENV) // production

同时设置多个环境变量

xxxxxxxxxx
5
1
{
2
  "scripts": {
3
    "build": "cross-env FIRST_ENV=one SECOND_ENV=two node ./my-program"
4
  }
5
}

也可以将命令分开成不同命令，或者环境变量的声明与实际执行的命令分开。如下：

xxxxxxxxxx
6
1
{
2
  "scripts": {
3
    "parentScript": "cross-env GREET=\"Joe\" npm run childScript",
4
    "childScript": "cross-env-shell \"echo Hello $GREET\""
5
  }
6
}

childScript里是实际执行的命令，而 parentScript 则是用来设置环境变量。然后执行 parentScript 而不是childScript。这意味着可以使用$GREET env var语法，即使在通常要求为%GREET%的Windows上也是如此。

注意：

在windows上设置环境变量：

xxxxxxxxxx
2
1
# 环境变量追加值 set 变量名=%变量名%;变量内容 
2
set path=%path%;C:\web;C:\Tools

在linux设置环境变量：

xxxxxxxxxx
2
1
# 环境变量追加值
2
export path=$path:/home/download:/usr/local/

设置JSON字符串

xxxxxxxxxx
5
1
{
2
  "scripts": {
3
    "test": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\"} node some_file.test.ts"
4
  }
5
}

特别注意双引号“之前的三重反斜杠 \\\和不使用单引号'。要在Windows和UNIX上工作，必须满足这两个条件。

完整示例

xxxxxxxxxx
13
1
{
2
  "scripts": {
3
      "dev": "cross-env NODE_ENV=development VUE_APP_HOST=https://cloudnest.bcjgy.com/ vue-cli-service serve --mode dev",
4
      "test": "cross-env NODE_ENV=test  VUE_APP_HOST=https://cloudnest.bcjgy.com/ vue-cli-service serve --mode test",
5
      "prod": "cross-env NODE_ENV=production  VUE_APP_HOST=https://cloudnest.fscut.com/ vue-cli-service serve --mode prod",
6
      "serve": "vue-cli-service serve",
7
      "build": "vue-cli-service build",
8
      "lint": "vue-cli-service lint",
9
      "build:dev": "vue-cli-service build --mode dev",
10
      "build:test": "cross-env NODE_ENV=test VUE_APP_HOST=https://cloudnest.bcjgy.com/ vue-cli-service build --mode test",
11
      "build:prod": "cross-env NODE_ENV=production VUE_APP_HOST=https://cloudnest.fscut.com/ vue-cli-service build --mode prod"
12
  }
13
}