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函数
Dec 22 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
vue组件发布到npm简单步骤
Nov 30 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
js模拟实现烟花特效
Mar 10 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制作静态网站的模板框架(二)
2006/10/09 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
基于Vue实现拖拽效果
2018/04/27 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python3生成手写体数字方法
2018/01/30 Python
python写一个md5解密器示例
2018/02/23 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
彻底解决Python包下载慢问题
2020/11/15 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
买房子个人收入证明
2014/10/12 职场文书
小学见习报告
2014/10/31 职场文书
作文批改评语
2014/12/25 职场文书
酒店辞职书范文
2015/02/26 职场文书
小学教代会开幕词
2016/03/04 职场文书
mysql sock 文件解析及作用讲解
2022/07/15 MySQL