现在有一需求就是:在一个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

Logo

前往低代码交流专区

更多推荐