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对象的几种扩展及简写
Oct 09 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
elementui实现预览图片组件二次封装
Dec 29 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调用Twitter的RSS的实现代码
2010/03/10 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python实现把类当做字典来访问
2019/12/16 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
自我评价中英文语句
2013/11/30 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
世界遗产的导游词
2015/02/13 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android