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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
Vue 项目分环境打包的方法示例
Aug 03 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 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
php 检查电子邮件函数(自写)
2014/01/16 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP 图片处理
2020/09/16 PHP
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
python基础教程之Hello World!
2014/08/29 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Scrapy框架使用的基本知识
2018/10/21 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
商务助理岗位职责
2013/11/13 职场文书
力学专业毕业生自荐信
2013/11/17 职场文书
升学宴主持词
2014/04/02 职场文书
感谢师恩主题班会
2015/08/17 职场文书
校园广播稿范文
2015/08/19 职场文书
详解Python内置模块Collections
2022/03/22 Python