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 相关文章推荐
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
swiperjs实现导航与tab页的联动
Dec 13 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
preg_match_all使用心得分享
2014/01/31 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
Three.js学习之网格
2016/08/10 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python简单读取大文件的方法
2016/07/01 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
找到不普通的东西:Bonanza
2016/10/20 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
益达广告词
2014/03/14 职场文书
承诺书怎么写
2014/03/26 职场文书
环境科学专业求职信
2014/08/04 职场文书
期中考试复习计划
2015/01/19 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
JavaScript原型链详解
2021/11/07 Javascript
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫