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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
JS定时器实例详细分析
Oct 11 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
Vue的props父传子的示例代码
May 20 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去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php+highchats生成动态统计图
2014/05/21 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
php构造函数与析构函数
2016/04/23 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Python中endswith()函数的基本使用
2015/04/07 Python
Python pickle模块用法实例分析
2015/05/27 Python
10个Python小技巧你值得拥有
2018/09/29 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
物业管理工作方案
2014/05/10 职场文书
创先争优一句话承诺
2014/05/29 职场文书
小学端午节活动总结
2015/02/11 职场文书
幸福终点站观后感
2015/06/04 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android