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 相关文章推荐
常规表格多表头查询示例
Feb 21 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
基于Vue实现timepicker
Apr 25 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
微信小程序开发摇一摇功能
Nov 22 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命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
vue实现评价星星功能
2020/06/30 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
简历的自荐信
2013/12/19 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
先进典型事迹材料
2014/12/29 职场文书
服务承诺书
2015/01/19 职场文书
感谢信的格式
2015/01/21 职场文书
委托函范文
2015/01/29 职场文书
围城读书笔记
2015/06/26 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书