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

你可能感兴趣的:(vue,vue.js)