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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
希特勒的演讲稿
2014/05/23 职场文书
中国世界遗产导游词
2015/02/13 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
员工升职自我评价
2019/03/26 职场文书