vue项目环境变量配置的实现方法
问题
实际开发中,开发环境和生产环境中一些变量是不同的,比如接口地址等等,打包之前需要手动切换。
编译时
新建env.js
letbaseUrl=''; if(process.env.NODE_ENV=='production'){ baseUrl='https://xxxxxxxxx'; }elseif(process.env.NODE_ENV=='development'){ baseUrl='/api' } export{ baseUrl }
process.env.NODE_ENV是通过webpack内置的DefinePlugin为所有的依赖定义的变量
webpack.dev.conf.js
newwebpack.DefinePlugin({ 'process.env.NODE_ENV':'development' }),
webpack.prod.conf.js
newwebpack.DefinePlugin({ 'process.env.NODE_ENV':'production' }),
这样在项目任意文件中都能调用process.env.NODE_ENV变量,本人测试过,process并不是挂载在window变量上,猜测可能是挂载到了node的process变量。
在运行脚本编译项目的时候,会根据变量值的不同,设置不同的baseUrl。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。