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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
微信小程序实现同时上传多张图片
Feb 03 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
一个程序下载的管理程序(三)
2006/10/09 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
CI框架的安全性分析
2016/05/18 PHP
一个支付页面DEMO附截图
2014/07/22 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
基本DOM节点操作
2017/01/17 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
Python unittest模块用法实例分析
2018/05/25 Python
python逆序打印各位数字的方法
2018/06/25 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
解决Django连接db遇到的问题
2019/08/29 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
Python 中如何写注释
2020/08/28 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
Delphi CS笔试题
2014/01/04 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
外贸专业求职信
2014/03/09 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
退税申请报告怎么写
2015/05/18 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers