vue项目环境变量配置的实现方法

问题

成都地区优秀IDC服务器托管提供商(成都创新互联).为客户提供专业的达州服务器托管,四川各地服务器托管,达州服务器托管、多线服务器托管.托管咨询专线：18982081108

实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。

编译时

新建env.js

let baseUrl = '';
if(process.env.NODE_ENV == 'production'){
  baseUrl = 'https://xxxxxxxxx';
} else if (process.env.NODE_ENV == 'development') {
 baseUrl = '/api'
}

export {
  baseUrl
}

process.env.NODE_ENV 是通过webpack 内置的 DefinePlugin 为所有的依赖定义的变量

webpack.dev.conf.js

new webpack.DefinePlugin({
   'process.env.NODE_ENV': 'development'
  }),

webpack.prod.conf.js

new webpack.DefinePlugin({
   'process.env.NODE_ENV': 'production'
  }),

这样在项目任意文件中都能调用process.env.NODE_ENV变量，本人测试过，process并不是挂载在window变量上，猜测可能是挂载到了node的process变量。

在运行脚本编译项目的时候，会根据变量值的不同，设置不同的baseUrl。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

当前文章：vue项目环境变量配置的实现方法
网址分享：https://www.cdcxhl.com/article44/gdhohe.html

成都网站建设公司_创新互联，为您提供网站导航、品牌网站制作、域名注册、品牌网站设计、网站设计公司、网站收录

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容