本篇文章给大家分享的是有关vue项目上传Github预览的实现，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
创新互联公司专注于中大型企业的
成都网站设计、网站制作和网站改版、网站营销服务，追求商业策划与数据分析、创意艺术与技术开发的融合，累计客户上千，服务满意度达97%。帮助广大客户顺利对接上互联网浪潮，准确优选出符合自己需要的互联网运用，我们将一直专注
成都品牌网站建设和互联网程序开发，在前进的路上，与客户一起成长！
一、修改配置
1、解决文件路径问题：
打开项目根目录config文件夹下的index.js文件，进行如下修改：
看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/'改为‘./'
2、背景图片路径错误
在css中写的background-img的路径出错需要找到build文件夹下的utils.js，修改一下位置
打开根目录build文件夹中的utils.js文件，在下图中标出的位置中添加publicPath: '../../'，
项目打包后dist文件夹下的index.html引入文件没有引号，这里的解决方法是：
找到build文件夹下的webpack.prod.conf.js文件，在webpack.prod.conf.js找到new HtmlWebpackPlugin中的minify，把minify中的 removeAttributeQuotes: true改为 removeAttributeQuotes:false
二、上传项目到Github
执行npm run build命令，打包项目
如果只是想通过github pages预览项目，不想上传整个项目代码，可以只将dist文件夹下的文件上传到github上，然后开启github pages功能预览。在dist文件夹下执行以下步骤
1.在github里面新建一个仓库
2.将dist文件夹中的文件上传到这个仓库中
如果想管理项目的同时又可以预览，可以将整个项目都上传到github，然后将dist文件夹中的文件上传到仓库分支中，步骤如下：
1.在github里面新建一个仓库,
2.将整个项目上传到github
3.然后将远程仓库克隆到本地
git clone ...
4.接着在这个仓库中建一个分支
生成分支gh-pages并切换到此分支
进入到克隆得到的文件夹中，执行如下命令
git checkout --orphan gh-pages
5.将克隆得到的文件里面除了.git文件以外的文件全部删掉，再将项目根目录下打包后生成的dist文件夹里面的内容复制到克隆文件中。
依次执行以下命令：
git add .
git commit -m “描述信息”
git remote add origin ....（这一步根据自己创建的仓库名来写）
git push -u origin gh-pages （push文件到仓库中,注意后面是分支的名字,不是master）
以上就是vue项目上传Github预览的实现，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
本文标题：vue项目上传Github预览的实现-创新互联
网址分享：
http://cdkjz.cn/article/djhjcj.html
