cross-env 运行跨平台设置和使用环境变量的脚本

cross-env：运行跨平台设置和使用环境变量的脚本

大多数情况下，在 windows 平台下使用类似于: NODE_ENV=production 的命令行指令会卡住，不同平台在使用命令行时有许多区别（例如在POSIX，使用$ENV_VAR,在windows，使用%ENV_VAR%）。

• 不同平台使用唯一指令，无需担心跨平台问题
• 可以使用不同的 env 变量启动同一命令
• 可以解决当环境变量太长而无法将所有内容放在一行的问题

| 安装

npm install --save-dev cross-env

NOTE : Version 7 of cross-env only supports Node.js 10 and higher, to use it on Node.js 8 or lower install version 6 npm install –save-dev cross-env@6

| 使用

{
   "scripts": {
        "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
   }
}

| vue 项目中使用 cross-env

前端项目搭建常常需要动态配置代理环境[开发/测试/生产]，及其打包命令。使用 cross-env 可以实现在 scripts 脚本中修改 NODE_ENV 的值从而实现不同环境中 proccess.env.NODE_ENV 的不同

1. package.json 中设置脚本

    "scripts": {
        "dev": "cross-env NODE_ENVIRONMENT=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "dev:test": "cross-env NODE_ENVIRONMENT=test npm run dev",
        "dev:uat": "cross-env NODE_ENVIRONMENT=uat npm run dev",
        "dev:pro": "cross-env NODE_ENVIRONMENT=pro npm run dev"
    }
   

2. config/env.js: 根据不同环境设置环境代理

    module.exports = {
        test:{
            '/aa': {
                target: 'http://192.168.1.1:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/aa': '/aa'
                }
            },
        },
        uat:{
            '/aa': {
                target: 'http://192.168.1.2:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/aa': '/aa'
                }
            },
        },
        pro:{
            '/aa': {
                target: 'http://192.168.1.3:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/aa': '/aa'
                }
            },
        },
    }
   

3. config/index.js 引用代理设置

const environment = require('./env')
let node_env = process.env.NODE_ENVIRONMENT // process-node 的全局变量
let proxyTable
switch (node_env) {
    case 'test':
        proxyTable = environment.test
        break;
    case 'uat':
        proxyTable = environment.uat
        break;
    case 'pro':
        proxyTable = environment.pro
        break;
}
module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        host: Ip(), // can be overwritten by process.env.HOST
        port: 8082, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        // ...
        proxyTable,
    },
    build:{
        // ...
    }