cross-env跨平台设置环境变量

「爱情、让人受尽委屈。」 2021-09-18 13:46 519阅读 0赞

现在有一需求就是：在一个vue的项目中，在测试环境和生产环境打包的时候，链接的路径不一致？

如何在package.json中设置，通过不同的命令来实现？

首先cross-env是什么？

答：cross-env能跨平台地设置及使用环境变量

\*\*\*\*大多数情况下，在windows平台下使用类似于: NODE\_ENV=production的命令行指令会卡住，windows平台与POSIX在使用命令行时有许多区别（例如在POSIX，使用$ENV\_VAR,在windows，使用%ENV\_VAR%。。。）

cross-env让这一切变得简单，不同平台使用唯一指令，无需担心跨平台问题

1、

//package.json
    "scripts": {
        "dev": "SSO_URL=http://YYY.com && webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build:test": "SSO_URL=http://XXX.com node && build/build.js",
        "build:prod": "SSO_URL=http://YYY.com node && build/build.js"    
      },

以上这个配置在[windows][]环境中无法正常运行，在linux中应该不会有问题？但是我们还需要在本地的windows中测试怎么办？那么就用到cross-env跨平台设置变量了；

2、楼主进行了以下修改

//package.json
    "scripts": {
        "dev": "cross-env SSO_URL=http://YYY.com webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build:test": "cross-env SSO_URL=http://XXX.com node build/build.js",
        "build:prod": "cross-env SSO_URL=http://YYY.com node build/build.js"
    },

但是，又遇到了下一个问题，那就是虽然这个变量全局设置了，但是通过以下方式竟然获取不到？

//dev.js
    console.log(process.dev.SSO_URL)  //undefined   why?

3、然后楼主仔细看了一下配置文件，发现有个地方还需要修改一下，就是以下这2个文件。

//webpack.dev.conf.js
     new webpack.DefinePlugin({
          'process.env': require('../config/dev.env'),
          'process.env.SSO_URL': JSON.stringify(process.env.SSO_URL)
        }),
    
    
    //webpack.dev.conf.js
    new webpack.DefinePlugin({
          'process.env': env,
          'process.env.SSO_URL': JSON.stringify(process.env.SSO_URL)
        }),

4、这样，在文件中就可以拿到这个变量了

//dev.js
    console.log(process.dev.SSO_URL)  //对应设置了值   OK！！！

5、根据不同的打包命令进行不同的环境变量设置了

（1）npm run build:test    打包测试——SSO\_URL=htpp://XXX.com

（2）npm run build:prod  打包生产——SSO\_URL=htpp://YYY.com

[windows]: https://www.baidu.com/s?wd=windows&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd