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


Posted in Javascript onOctober 12, 2018

问题

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

编译时

新建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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
javascript事件模型实例分析
Jan 30 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 #Javascript
原生JS实现轮播图效果
Oct 12 #Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 #Javascript
Element Input组件分析小结
Oct 11 #Javascript
element el-input directive数字进行控制
Oct 11 #Javascript
详解angular2.x创建项目入门指令
Oct 11 #Javascript
详解vscode中vue代码颜色插件
Oct 11 #Javascript
You might like
php简单实现MVC
2015/02/05 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
基于Python log 的正确打开方式
2018/04/28 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
医学生个人求职信范文
2014/02/07 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
环保建议书
2014/03/12 职场文书
特教教师先进事迹
2014/05/21 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
个人查摆剖析材料
2014/10/04 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL