基于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 相关文章推荐
javascript 写的一个简单的timer
Jul 30 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 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
PHP循环获取GET和POST值的代码
2008/04/09 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP模块memcached使用指南
2014/12/08 PHP
详谈PHP编码转换问题
2015/07/28 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
js+css实现打字效果
2020/06/24 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python随机数分布random测试
2018/08/27 Python
python版大富翁源代码分享
2018/11/19 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python 处理文件的几种方式
2019/08/23 Python
python下载库的步骤方法
2019/10/12 Python
Python 私有化操作实例分析
2019/11/21 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
阿巴庭院:Abba Patio
2019/06/18 全球购物
统计工作个人总结
2015/03/03 职场文书
施工安全员岗位职责
2015/04/11 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
Mysql文件存储图文详解
2021/06/01 MySQL
Java实现二分搜索树的示例代码
2022/03/17 Java/Android