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 相关文章推荐
js获取IP地址的方法小结
Jul 01 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
微信小程序入门教程
Nov 18 Javascript
AngularJS表单验证功能分析
May 26 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
alert中断settimeout计时功能
2013/07/26 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
Python标准库内置函数complex介绍
2014/11/25 Python
Python实现拼接多张图片的方法
2014/12/01 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
Python中表示字符串的三种方法
2017/09/06 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
Django中的ajax请求
2018/10/19 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
计算机求职信
2013/12/01 职场文书
致全体运动员广播稿
2014/02/01 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
保护环境倡议书100字
2014/05/19 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
学生检讨书怎么写
2014/10/09 职场文书
小学安全教育主题班会
2015/08/12 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python