Sail


手在键盘敲很轻


配置process.env判断代码运行环境

Preface

在开发一个项目的时候,会涉及到许多环境,比如dev、test、stage、product等,不同的环境需要加载不同的配置,因为后端接口的域名是不同的。


process.env

我们可以通过process.env来配置NODE_ENV来区分开发环境。

process对象是一个全局变量,它提供有关当前Node.js进程的信息并对其进行控制。 作为一个全局变量,它始终可供Node.js应用程序使用,无需使用require()process.env属性返回包含用户环境的对象。

package.json中进行配置

1
2
3
4
5
"scripts": {
"start": "node ./bin/www",
"dev": "NODE_ENV=development pm2 --no-daemon start ./bin/www --watch ",
"stage": "NODE_ENV=stage pm2 --no-daemon start ./bin/www --watch "
}

如果是windows环境,执行npm install cross-env

1
2
3
4
5
6
// 因为mac和windows设置命令环境变量的命令不一致, 所以用cross-env来做兼容
"scripts": {
"start": "node ./bin/www",
"dev": "cross-env NODE_ENV=development pm2 --no-daemon start ./bin/www --watch ",
"stage": "cross-env NODE_ENV=stage pm2 --no-daemon start ./bin/www --watch "
}

在代码中,我们就可以通过process.env.NODE_ENV来判断环境

1
2
3
4
5
6
let host = null;
if (process.env.NODE_ENV === "development") {
// pass
} else if (process.env.NODE_ENV === "stage") {
// pass
}

vue-cli创建的项目

如果我们是vue-cli脚手架来创建的项目:

模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:

  • development 模式用于 vue-cli-service serve
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式用于 vue-cli-service test:unit
    注意模式不同于 NODE_ENV,一个模式可以包含多个环境变量。也就是说,每个模式都会将 NODE_ENV 的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为 “development”。

你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如,如果你在项目根目录创建一个名为 .env.development 的文件,那么在这个文件里声明过的变量就只会在 development 模式下被载入。

你可以通过传递 –mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量,请在你的 package.json 脚本中加入:

1
"dev-build": "vue-cli-service build --mode development",

参考

process | Node.js API 文档
Node环境变量 process.env 的那些事儿 - JS那些事儿 - SegmentFault 思否
环境变量和模式 | Vue CLI
业务代码如何判断生产/开发环境 - 我不懂前端 - SegmentFault 思否
React系列—Webpack环境搭建(二)不同环境不同配置 - 朱哥的全栈历险记 - SegmentFault 思否

© 2016-2019. | 由Hexo强力驱动 | 主题Huno | 渝ICP备17002561号 | 不装弱了,我要做大佬