vue项目上传Github预览的实现示例


Posted in Javascript onNovember 06, 2018

最近在用Vue仿写cnode社区,想要上传到github,并通过Github pages预览,在这个过程中遇到了一些问题,因此写个笔记,以便查阅。

完成Vue项目以后,在上传到github之前,需要修改一些配置才能通过github pages预览项目。

一、修改配置

1、解决文件路径问题:

打开项目根目录config文件夹下的index.js文件,进行如下修改:

vue项目上传Github预览的实现示例

看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将‘/'改为‘./'

2、背景图片路径错误

在css中写的background-img的路径出错需要找到build文件夹下的utils.js,修改一下位置

打开根目录build文件夹中的utils.js文件,在下图中标出的位置中添加publicPath: '../../', 

vue项目上传Github预览的实现示例

项目打包后dist文件夹下的index.html引入文件没有引号,这里的解决方法是:

找到build文件夹下的webpack.prod.conf.js文件,在webpack.prod.conf.js找到new HtmlWebpackPlugin中的minify,把minify中的 removeAttributeQuotes: true改为 removeAttributeQuotes:false

vue项目上传Github预览的实现示例

二、上传项目到Github

执行npm run build命令,打包项目

如果只是想通过github pages预览项目,不想上传整个项目代码,可以只将dist文件夹下的文件上传到github上,然后开启github pages功能预览。在dist文件夹下执行以下步骤

1.在github里面新建一个仓库
2.将dist文件夹中的文件上传到这个仓库中

  • git init
  • git add .
  • git commit -m '描述信息'
  • 关联到远程仓库:git remote add origin ...
  • git push -u origin master

如果想管理项目的同时又可以预览,可以将整个项目都上传到github,然后将dist文件夹中的文件上传到仓库分支中,步骤如下:

1.在github里面新建一个仓库,
2.将整个项目上传到github

  • git init
  • git add .
  • git commit -m '描述信息'
  • 关联到远程仓库:git remote add origin ...
  • git push -u origin master

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)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
React Component存在的几种形式详解
Nov 06 #Javascript
支付宝小程序tabbar底部导航
Nov 06 #Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 #Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 #Javascript
微信小程序实现底部导航
Nov 05 #Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 #Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 #Javascript
You might like
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
javascript读取xml
2006/11/04 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python简单实现旋转图片的方法
2015/05/30 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
10的分与合教学反思
2014/04/30 职场文书
建筑工地大门标语
2014/06/18 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
青年志愿者活动感想
2015/08/07 职场文书