vue项目打包后上传至GitHub，并实现github-pages的预览

wangdai 发布于2019-08-23 17:17 / 675人阅读

摘要：项目打包后上传至，并实现的预览打包项目项目命令行输入打包命令，生成了文件夹打包完成。参考各位大佬求教一个问题项目打包后如何上传到实现预览上传本地项目到和预览使用数据怎么加载本地数据能让项目在上预览

vue项目打包后上传至GitHub，并实现github-pages的预览 1. 打包vue 项目

vue项目：

命令行输入打包命令npm run build，生成了dist文件夹：

打包完成。

打包常见问题1——项目资源无法加载

打开刚刚打包好的dist文件夹，浏览器打开index.html

发现该页面是空白的，打开控制台发现

这里看到index.html文件中没有加载任何css、js文件。

解决方法——修改config文件

打开项目根目录config下的index.js文件，进行如下修改：

即将assetsPublicPath: "/"改成assetsPublicPath: "./"
重新npm run build

打包常见问题2——字体图标无法加载

字体和图标不能正常显示

解决方法——修改build文件

打开根目录下build中的utils.js文件，在控制build样式文件代码中添加　publicPath: "../../"，

添加publicPath: "../../"

重新npm run build

2. 上传vue 项目并预览

将项目提交至仓库(包括dist目录)，假如仓库名称为test.

$ git subtree push --prefix dist origin gh-pages，将dist目录提交至gh-pages。

在地址栏输入https://你的github名称.github.io/test/即可预览。

其他问题

用mock模拟数据，无法使用。解决方案：创建一个.json文件把数据写死，然后引用这个文件。

对于使用Vue-cli3.0构建的项目出现的样式失效问题，解决方案：在vue.config.js中设置baseUrl: "/staff/"。

参考

各位大佬求教一个问题 Vue项目打包后如何上传到GitHub实现预览

上传本地Vue项目到github和gh-pages预览

使用githubpagesmock数据

怎么加载本地json数据,能让项目在github pages上预览

GPU云服务器云服务器将项目打包上传至腾讯云服务器图片上传服务器并预览 github-pages 阿里云服务器上传用vue做好的页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104101.html

vue插件开发流程详解-从开发到发布至npm（二）

摘要：使用插件安装使用测试访问页面注意大大的红字，如果要在本项目下测试，需要修改项目名称，不然报项目名字和包名字是一致的错，无法安装的如下结束语这个笔记继上一篇插件开发流程详解从开发到发布至一，替换了开发和测试的项目架构。　　前记：上一篇 https://www.cnblogs.com/adouw...，说到了一个完整的vue插件开发、发布的流程，总结下来就讲了这么一个事，如何注入vue,...

Flink_China 2019-08-23 12:00 评论0 收藏0
vue-cli构建的项目在github上的预览问题

摘要：前两天写了一篇关于的小米便签项目实例，有网友建议增加在线预览的效果，然后在上增加可预览项目时遇到并解决一些问题，在这给大家做个分享。前两天写了一篇关于vuex2.0的小米便签项目实例，有网友建议增加在线预览的效果，然后在github上增加可预览项目时遇到并解决一些问题，在这给大家做个分享。我的小米便签项目是用vue-cli脚手架构建的，在执行npm run build命令之后会对项...

voidking 2019-08-22 17:12 评论0 收藏0
使用 Vue2.js + Node.js 搭建一个小型的全栈项目

摘要：大概过来一个多月，我决定两路开工。使用给前端写接口，配备后台管理功能，先把后台搭建好。大概几天过后，后台一些简单的功能实现后，就开始用开始搭建前台，也一直在想做点什么比较好，于是就做了个豆瓣评分类似的项目。写在前面由于最近公司业务不是很忙，空闲时间比较多，于是就在纠结Vue.js（之前就学习过）和Node.js先专研哪个比较好，最终选择了先玩玩Node.js。经过一段时间的学习，就...

freewolf 2019-08-21 16:20 评论0 收藏0
【easy-invoices】electron-vue、sqlite3 项目初探

摘要：远程读取会有许多限制，防止引起不必要的安全隐患。比较时可以把点去掉转为数字类型比较脚本执行完毕下载前可以拿到更新日志时间版本号和包大小，下载时可以拿到速度。然后开启该项目的构建。将第一步生成的填至项目环境变量，参数名为。父母都是做出纳相关的工作，希望我能给他们做个简单的进销存，在上班的时候使用。开发一个不需要花钱买服务器，不需要依赖网络（更新除外），单机版的程序，对于前端出身的我来说...

wpw 2019-08-23 12:36 评论0 收藏0