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 对象定义方法 简单易学
Mar 22 Javascript
innerText和innerHTML 一些问题分析
May 18 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JavaScript中this详解
Sep 01 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
JavaScript使用setTimeout实现倒计时效果
Feb 19 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
239军机修复记
2021/03/02 无线电
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP面向对象详解(三)
2015/12/07 PHP
浅谈PHP的反射机制
2016/12/15 PHP
php实现文件预览功能
2017/05/23 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python程序退出方式小结
2017/12/09 Python
python 实现表情识别
2020/11/21 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
主要领导对照检查材料
2014/08/26 职场文书
音乐教师个人总结
2015/02/06 职场文书
数学教师个人总结
2015/02/06 职场文书
党员转正介绍人意见
2015/06/03 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python