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 相关文章推荐
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
原生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函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
js实现选项卡效果
2020/03/07 Javascript
Python读写Json涉及到中文的处理方法
2016/09/12 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
python中退出多层循环的方法
2018/11/27 Python
Django如何批量创建Model
2020/09/01 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
音乐学个人的自荐书范文
2013/11/26 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
介绍长城的导游词
2015/01/30 职场文书
初中教师个人工作总结
2015/02/10 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
详解MySQL的半同步
2021/04/22 MySQL
redis实现排行榜功能
2021/05/24 Redis
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
浅谈MySQL user权限表
2021/06/18 MySQL
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL