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 相关文章推荐
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
javascript操作css属性
Dec 30 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
js本地图片预览实现代码
Oct 09 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
javascript验证form表单数据的案例详解
Mar 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
使用PHP模拟HTTP认证
2006/10/09 PHP
PHP的基本常识小结
2013/07/05 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
Python实现简单的代理服务器
2015/07/25 Python
Python单链表简单实现代码
2016/04/27 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
怎样声明子类
2013/07/02 面试题
百度软件工程师职位
2013/02/14 面试题
同学会邀请书大全
2014/01/12 职场文书
超市周年庆活动方案
2014/08/16 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
员工给公司的建议书
2019/06/24 职场文书
python多线程方法详解
2022/01/18 Python
Python中如何处理常见报错
2022/01/18 Python