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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 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生成rss类用法实例
2015/04/14 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
学python安装的软件总结
2019/10/12 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
消防器材管理制度
2014/01/28 职场文书
初中家长评语和期望
2014/12/26 职场文书
前台文员岗位职责
2015/02/04 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
React如何创建组件
2021/06/27 Javascript