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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
原生js+canvas实现下雪效果
Aug 02 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
SONY ICF-F10中波修复记
2021/03/02 无线电
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
详解python开发环境搭建
2016/12/16 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Python中的取模运算方法
2018/11/10 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
美国零售商店:Blue&Cream
2017/04/07 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
大型会议接待方案
2014/03/01 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
开业庆典致辞
2015/08/01 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL