基于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 相关文章推荐
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
学习Vue组件实例
Apr 28 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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
Smarty安装配置方法
2008/04/10 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
Vuex之理解Store的用法
2017/04/19 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
详解vue 组件
2020/06/11 Javascript
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
社团活动总结怎么写
2014/06/30 职场文书
干部作风建设工作总结
2014/10/29 职场文书
党员自评材料范文
2014/12/17 职场文书
费城故事观后感
2015/06/10 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
linux下安装redis图文详细步骤
2021/12/04 Redis
Java完整实现记事本代码
2022/06/16 Java/Android