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 AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
react实现复选框全选和反选组件效果
Aug 25 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python文件处理
2016/02/29 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
python读取图片任意范围区域
2019/01/23 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
JSF的标签库有哪些
2012/04/27 面试题
函授本科自我鉴定
2013/11/03 职场文书
自荐信要包含哪些内容
2013/11/06 职场文书
小学毕业感言300字
2014/02/19 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
经理聘任证明
2015/03/02 职场文书
2015年话务员工作总结
2015/04/29 职场文书
市级三好生竞选稿
2015/11/21 职场文书
2019军训心得体会
2019/06/27 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技