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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
基于datagrid框架的查询
Apr 08 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
微信小程序-API接口安全详解
Jul 16 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
Python Matplotlib库入门指南
2015/05/18 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
J2EE包括哪些技术
2016/11/25 面试题
公司副总经理任命书
2014/06/05 职场文书
法学求职信
2014/06/22 职场文书
护理目标管理责任书
2014/07/25 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
防灾减灾活动总结
2014/08/30 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL