配置变量区分不同环境

我这里只配置了开发环境和生产环境，若要配置其他的环境，举一反三。。。

安装cross-env

由于我们的电脑有Windows和Mac，为了统一命令，可以安装cross-env包。

• 安装：npm install cross-env
• 使用：
  • 不需要区分环境时，可以设置启动命令为："start": "node build/dev-server.js"
  • 需要区分环境时，在命令中定义变量，windows使用set命令；mac使用export命令
  • 安装了cross-env后，统一使用cross-env命令即可。
  • 示例："start": "cross-env NODE_TYPE=development node build/dev-server.js"

使用NODE_TYPE变量区分环境

这里采用一个环境变量NODE_TYPE来区分不同的环境。我们知道process.env属性返回包含当前shell的所有环境变量，因此将环境变量NODE_TYPE定义在process.env中。

// 开发环境
dev: {
    env: {
        NODE_TYPE: `"${process.env.NODE_TYPE}"`
    }
}
// 生产环境
build: {
    env: {
        NODE_TYPE: `"${process.env.NODE_TYPE}"`
    }
}
复制代码

为不同环境赋不同的NODE_TYPE

为NODE_TYPE变量赋不同的值即可区分生产环境还是开发环境。如下示例：

"scripts": {
    "start": "cross-env NODE_TYPE=development node build/dev-server.js",
    "build": "cross-env NODE_TYPE=production node build/build.js"
}
复制代码

• 将开发环境定义为development，生产环境定义为production；
• 这样由于我们在开发环境启动项目使用命令npm start，执行该命令后，NODE_TYPE会被赋值为development；
• 在生产环境构建项目时使用命令npm run build，执行该命令后，NODE_TYPE会被赋值为production。

根据NODE_TYPE做不同操作

环境已经区分开，然后就可以根据不同环境做相关操作啦。 这里举一个关于系统登出地址的小例子。 由于开发环境和生产环境的登出地址不同，因此我需要判断不同环境下使用不同的地址。

let getLogoutUrl = () => {
    let logoutUrl = ''
    switch (process.env.NODE_TYPE) {
        case 'development':
          logoutUrl = '开发环境登出地址'
          break
        case 'production':
          logoutUrl = '生产环境登出地址'
          break
    }
    return logoutUrl
}
const logout = getLogoutUrl()
export {logout}
复制代码

下面只需要在需要设置登出地址的文件中引入该文件就可以啦。

转载于:https://juejin.im/post/5a5ec0296fb9a01cad7c309b