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 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
js中的this关键字详解
Sep 25 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
Angular网络请求的封装方法
May 22 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 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防注入漏洞过滤函数代码
2012/04/11 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
一个javascript参数的小问题
2008/03/02 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python下载文件时显示下载进度的方法
2015/04/02 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
python opencv实现简易画图板
2020/08/27 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
施工员岗位职责
2014/03/16 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
三年级学生期末评语
2014/12/26 职场文书
本溪关门山导游词
2015/02/09 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python