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 相关文章推荐
javaScript复制功能调用实现方案
Dec 13 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
ajax异步请求详解
Jan 06 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
JS中数据结构之栈
Jan 01 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
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
新闻分类录入、显示系统
2006/10/09 PHP
php SQL防注入代码集合
2008/04/25 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
python pip如何手动安装二进制包
2020/09/30 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
2014植树节活动总结
2014/03/11 职场文书
关于学习的演讲稿
2014/05/10 职场文书
求职信范文大全
2014/05/26 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
教师读书笔记
2015/06/29 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
2016教师节问候语
2015/11/10 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS