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打造TabPanel效果代码
May 22 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
js实现石头剪刀布游戏
Oct 11 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中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
关于JavaScript的一些看法
2009/05/27 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python 的 Socket 编程
2015/03/24 Python
介绍Python中几个常用的类方法
2015/04/08 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
Django 路由控制的实现
2019/07/17 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python Django路径配置实现过程解析
2020/11/05 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
法人授权委托书范本
2014/09/17 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
nginx静态资源的服务器配置方法
2022/07/07 Servers