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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
js仿京东放大镜效果
Aug 09 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 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
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
利用PHP实现短域名互转
2013/07/05 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP children()函数讲解
2019/02/03 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
在类Unix系统上开始Python3编程入门
2015/08/20 Python
tensorflow识别自己手写数字
2018/03/14 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Python字符串对象实现原理详解
2019/07/01 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
应聘编辑职位自荐信范文
2014/01/05 职场文书
cf搞笑广告词
2014/03/14 职场文书
施工安全保证书
2015/05/09 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记