基于vue-cli 打包时抽离项目相关配置文件详解


Posted in Javascript onMarch 07, 2018

前言:当使用vue-cli进行开发时时常需要动态配置一些设置,比如接口的请求地址(axios.defaults.baseURL),这些设置可能需要在项目编译后再进行设置的,所以在vue-cli里我们需要对这些配置文件进行抽离,不让webpack把配置文件也进行编译。

首先,我们需要在/static 下面新建一个js文件作为配置文件

基于vue-cli 打包时抽离项目相关配置文件详解

里面的内容如下:

window.g={
 AXIOS_TIMEOUT:10000,
 SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服务器地址
}

这里将所有的配置注入到window对象的一个属性里面,你可以自定义这个属性

然后在index.html里面引入这个js

<script src="/static/js/config.js"></script>

在项目中使用时,直接使用window.g去调用这个配置文件的内容。

如此配置之后进行打包时,会产生这样的效果

基于vue-cli 打包时抽离项目相关配置文件详解

可以看到这里的配置文件会原样输出不会打包,那么当我们把编译好的前端工程交给部署人员去部署的时候,就不用事先问号后台地址了,部署人员可以直接通过修改配置里面的内容去决定服务器的地址。

所以通过这种方式可以把项目相关配置文件抽离开来

以上这篇基于vue-cli 打包时抽离项目相关配置文件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 #Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 #Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 #Javascript
解决vue build打包之后首页白屏的问题
Mar 06 #Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 #Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 #Javascript
解决vue打包项目后刷新404的问题
Mar 06 #Javascript
You might like
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
python构建深度神经网络(DNN)
2018/03/10 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
python定义具名元组实例操作
2021/02/28 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
应用服务器有那些
2012/01/19 面试题
2014年健康教育实施方案
2014/02/17 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
退税申请报告怎么写
2015/05/18 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript