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 div层的放大与缩小简单实现代码
Mar 28 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
AngularJS select设置默认值的实现方法
Aug 25 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 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
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
javascript知识点收藏
2007/02/22 Javascript
一段多浏览器的"复制到剪贴板"javascript代码
2007/03/27 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
Javascript实现秒表计时游戏
2020/05/27 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
外企求职信范文分享
2013/12/31 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript