脚本宝典收集整理的这篇文章主要介绍了vue项目打包后上传至GitHub,并实现github-pages的预览,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
vue项目:
命令行输入打包命令npm run build
,生成了dist文件夹:
打包完成。
打开刚刚打包好的dist文件夹,浏览器打开index.htML
发现该页面是空白的,打开控制台发现
这里看到index.html文件中没有加载任何css、js文件。
打开项目根目录config下的index.js文件,进行如下修改:
即将assetsPublicPath: '/'
改成assetsPublicPath: './'
重新npm run build
字体和图标不能正常显示
打开根目录下build中的utils.js文件,在控制build样式文件代码中添加 publicPath: '../../',
添加publicPath: '../../'
重新npm run build
$ git suBTree push --PRefix dist origin gh-pages
,将dist目录提交至gh-pages。https://你的github名称.github.io/test/
即可预览。vue.config.js
中设置baseUrl: '/staff/'
。觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! vue,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的vue项目打包后上传至GitHub,并实现github-pages的预览全部内容,希望文章能够帮你解决vue项目打包后上传至GitHub,并实现github-pages的预览所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。