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 入门级学习笔记及源码
Jan 22 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JS setTimeout与setInterval的区别
Apr 20 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
生成php程序的php代码
2008/04/07 PHP
php上传文件问题汇总
2015/01/30 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
vuex state及mapState的基础用法详解
2018/04/19 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
python绘制简单彩虹图
2018/11/19 Python
Django时区详解
2019/07/24 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
初中科学教学反思
2014/01/21 职场文书
优秀经理获奖感言
2014/03/04 职场文书
环保建议书100字
2014/05/14 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
如何利用python创作字符画
2022/06/25 Python