解决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",
1

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)
    }), 
1
2
3
4

注：在 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不同的值去判断，例如判断不同的接口地址，区分正式和开发环境。