vue项目打包上传github并制作预览链接(pages)


Posted in Javascript onApril 19, 2019

当Vue项目完成后,在根目录下打开命令行,输入命令:

npm run build

实际上此命令就是执行build.js文件,将项目打包成静态资源。

此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有:

vue项目打包上传github并制作预览链接(pages)

static文件下包括项目打包后的css、js、img、fonts(字体图标)。

项目资源无法加载

点击index.html,浏览器显示该页面是空白的。打开控制台看到index.html文件中没有加载任何css、js文件。

解决方法:

打开项目根目录config下的index.js文件,进行如下修改:

vue项目打包上传github并制作预览链接(pages)

将 assetsPublicPath: ‘/‘ ,改为 assetsPublicPath: ‘./‘ ,

保存后重新 npm run build ,在新生成的dist目录下点开index.html,这时页面结构正常显示出来了,但是页面字体图标和mock的数据无法正常加载。

字体图标无法加载

页面中用background加载的图片可以正常显示,但是所有的字体图标都不能正常显示,解决方法:打开根目录下build中的 utils.js 文件,在控制build样式文件代码中添加 publicPath: ‘../../‘ ,如下:

保存后,依旧重新'npm run build',打开dist目录下的index.js可以看到字体图标正常显示了。

这里为什么需要这样修改,可以参考 https://github.com/vuejs-temp... 。

Mock数据无法正常加载(我的做法是把模拟的json数据放到cdn上,跳过这一步)

此项目的绝大部分页面内容是通过在跟目录下创建的data.json文件渲染到页面上的,是模拟从后端请求数据的,开发调试时用'npm run dev'命令,会借助node启动一个本地服务器,可以正常的渲染出相应的数据。而通过打包后的项目时属于静态资源的,点击index.html查看项目,是无法加载mock的数据的,浏览器也会报跨域的错误。若想正常的加载mock数据,最好的方式是讲打包后的资源丢到服务器中,或者使用jsonp请求线上真实数据,因为它的原理是利用script标签来获得数据,在github上是可以预览到的。

如何在github上预览网页效果:

vue项目打包上传github并制作预览链接(pages)

settings—github pages—选择“master branch”和“save”—刷新—再次找到“github pages”复制底下的链接—返回点击仓库名—点击edit—粘贴到框框内,一定要记住添加文件名及其后缀比如index.html—save.别人就可以通过这个链接访问你的网页。

总结

以上所述是小编给大家介绍的vue项目打包上传github并制作预览链接(pages),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript模块模式分析
May 16 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
vue组件之间的数据传递方法详解
Apr 19 #Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 #Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 #Javascript
基于javascript的拖拽类封装详解
Apr 19 #Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 #Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 #Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
微信支付扫码支付php版
2016/07/22 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
python处理document文档保留原样式
2019/09/23 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
django model通过字典更新数据实例
2020/04/01 Python
Python eval函数原理及用法解析
2020/11/14 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
关于美容院的活动方案
2014/08/14 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2015年教师节广播稿
2015/08/19 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python