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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
JS分页效果示例
Oct 11 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
使用javascipt---实现二分查找法
2013/04/10 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
python基础知识小结之集合
2015/11/25 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
物理教育专业毕业生推荐信
2013/11/03 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
厂区绿化方案
2014/05/08 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
道士塔读书笔记
2015/06/30 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
Redis命令处理过程源码解析
2022/02/12 Redis
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android