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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 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
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
js实现微信聊天界面
2020/08/09 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
如何写好优秀的创业计划书
2014/01/30 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
工作表扬信
2015/01/17 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技