package.json中scripts配置环境变量区分开发环境和生产环境

有时候打包时要区分打生产环境的包还是开发环境的包,这样判断需要用哪个baseurl或者其他变量

 

方法1:

//windows操作系统下:
"builddev": "set NODE_ENV=dev&&vue-cli-service build",
"buildprod": "set NODE_ENV=prod&&vue-cli-service build",

//mac操作系统下:
"builddev": "export NODE_ENV=dev&&vue-cli-service build",
"buildprod": "export NODE_ENV=prod&&vue-cli-service build",

方法2:

先安装依赖: npm install --save-dev cross-env

然后配置兼容windows和mac环境的

"builddev": "cross-env NODE_ENV=dev vue-cli-service build",
"buildprod": "cross-env NODE_ENV=prod vue-cli-service build",

最后在js代码中就可以通过:process.env.NODE_ENV获取到对应的值,用于判断环境:

baseurl:process.env.NODE_ENV==='prod'?'http://prod.api.com':'http://test.api.com'

console.log(process.env);  // {BASE_URL: "",NODE_ENV: "prod"}

ps:这里用的是vue-cli配置NODE_ENV,别的项目可能是要配置WEBPACK_ENV,直接替换即可,然后console.log(process.env)查看环境

 

方法3(推荐,只适用于vue-cli):

配置vuecli的环境变量,在项目根目录新建.env.dev文件,内容为:

NODE_ENV=production
VUE_APP_ENV=dev

再新建一个.env.production,内容为:

NODE_ENV=production
VUE_APP_ENV=production

package.json中scripts内配置:

"builddev": "vue-cli-service build --mode dev",
"buildprod": "vue-cli-service build --mode production",

然后判断环境变量得到对应的baseurl值:    baseurl:process.env.VUE_APP_ENV==='production'?'http://prod.api.com':'http://test.api.com'

推荐原因:这样配置不会使打包文件体积增大,前面的方式打包后的文件都比较大,因为不是生产环境,代码不会压缩,警告和提示语也被打包进去了等等,这些都是不适合生产环境的

注意文件中NODE_ENV=production要加上,不然NODE_ENV就是默认的开发环境,值为delelopment

环境变量设置参考:官方文档

 

设置结果:

没有设置NODE_ENV=production 

设置了NODE_ENV=production

上图对比,可以看到文件体积明显减小.

 

开启gzip压缩进一步减小压缩体积可查看:https://blog.csdn.net/bamboozjy/article/details/110382737