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 相关文章推荐
基于jquery tab切换(防止页面刷新)
May 23 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
学前端,css与javascript重难点浅析
Jun 11 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php单例模式示例分享
2015/02/12 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
python实现三维拟合的方法
2018/12/29 Python
python 图像平移和旋转的实例
2019/01/10 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
助人为乐表扬信范文
2014/01/14 职场文书
服务之星获奖感言
2014/01/21 职场文书
元旦晚会策划方案
2014/02/18 职场文书
个人委托书范本
2014/09/13 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
分析设计模式之模板方法Java实现
2021/06/23 Java/Android