解决vue2设置cross-env设置环境变量不起作用问题

1. 配置package.json

package.json的scripts里增加打包脚本

"build-app": "cross-env VUE_APP_LOGIN_VALUE=app NODE_OPTIONS=--max_old_space_size=4096 node build/build.js",

2.配置webpack.prod.conf.js

webpack.prod.conf.js的plugins里增加脚本

new webpack.DefinePlugin({
      'process.env': env,
      'process.env.VUE_APP_LOGIN_VALUE':JSON.stringify(process.env.VUE_APP_LOGIN_VALUE)
    }), 

注:在 webpack.prod.conf.js 文件中,new webpack.DefinePlugin 是用来定义全局变量的插件。它可以在构建过程中将自定义的全局常量注入到代码中,从而在源代码中直接使用这些常量。

3.输出process.env.VUE_APP_LOGIN_VALUE

页面中console.log(process.env.VUE_APP_LOGIN_VALUE),执行npm run build-app打包脚本,就可以在页面中看到console.log(process.env.VUE_APP_LOGIN_VALUE)输出的值是app了。

需求:我们可以在package.json中设置2条打包脚本,将变量赋不同的值,然后页面中再根据process.env.VUE_APP_LOGIN_VALUE不同的值去判断,例如判断不同的接口地址,区分正式和开发环境。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值