Vue项目打包部署到GitHub Pages的实现步骤

目录
  • 前言
  • 前期准备
  • 重要说明
    • 步骤1
    • 步骤2
    • 步骤3
    • 步骤4
    • 步骤5
    • 步骤6

前言

关于什么是github pages？怎样创建github 仓库上传本地项目到GitHub远程仓库？等基本操作本文不再赘述，初学者可以通过搜索找到大量文章教程。本文重点在于：

如何将vue项目源码（含dist目录）同步到到github仓库，同时单独将项目下的dist目录同步到gh-pages分支以便使用GitHub pages 发布和预览静态网页。

针对以上问题，作者以往的做法是将Vue项目源码托管到源码仓库，然后另外创建一个webpage仓库管理dist目录。然后针对webpage仓库开启GitHub pages 功能。实现GitHub pages访问Vue生成的静态页面

上述操作适用于不想公开源码仓库，同时又想免费使用GitHub pages 服务的情形，通常情况下一些个人的demo项目或是开源项目等仓库本身就是公开的，使用上述方法同时需要管理两个仓库，操作麻烦，最近了解到可以使用git subtree push --prefix dist origin gh-pages指令将项目下dist目录单独推送到远程仓库的gh-pages分支然后再将GitHub pages的source切换到gh-pages分支即可使用GitHub pages服务,到master分支管理源码gh-pages分支部署GitHub pages的目的

前期准备

  • 编译调试通过的Vue项目
  • 将本地项目推送到Github远程仓库默认master分支

步骤1和步骤2这方面的文章和教程不要太多，此处略过

重要说明

关于Vue项目的publicPath

  • 如果你打算发布到 https://.github.io/，则可以省略这一步，因为 publicPath默认即是 “/”。
  • 如果你打算发布到 https://.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 publicPath 设置为 “/<REPO>/”。

<PERO>即你的仓库名称

步骤1

执行npm run build打包Vue项目，此时项目目录下会多出一个dist目录

步骤2

将dist推送到远程仓库（默认为master分支）

通常dist目录会被git忽略，需要将dist从忽略文件中删除，然后将dist目录推送到远程仓库​

步骤3

使用git subtree push --prefix dist origin gh-pages将dist目录推送到远程的gh-pages分支，若远程没有gh-pagse分支则会新建gh-pagse分支然后再推送。

备注：此处只能是gh-pages分支，才能使用GitHub pages功能

步骤4

登录远程GitHub仓库，通过setting -> github pages -> source 将gh-pages设置为GitHub pages 的source

步骤5

访问GitHub pages 链接

步骤6

每次执行npm run build 后再次执行步骤2，步骤3

到此这篇关于Vue项目打包部署到GitHub Pages的实现步骤的文章就介绍到这了,更多相关Vue打包部署到GitHub Pages内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue cli 3.x 项目部署到 github pages的方法

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

  • vue项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即

  • vue项目打包上传github并制作预览链接（pages）

    当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源. 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下包括项目打包后的css.js.img.fonts(字体图标). 项目资源无法加载 点击index.html,浏览器显示该页面是空白的.打开控制台看到index.html文件中没有加载任何css.js文件. 解决方法: 打开项目根目录config下的index.

  • Vue项目打包部署到GitHub Pages的实现步骤

    Vue项目打包部署到GitHub Pages的实现步骤

    目录 前言 前期准备 重要说明 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 前言 关于什么是github pages?怎样创建github 仓库上传本地项目到GitHub远程仓库?等基本操作本文不再赘述,初学者可以通过搜索找到大量文章教程.本文重点在于: 如何将vue项目源码(含dist目录)同步到到github仓库,同时单独将项目下的dist目录同步到gh-pages分支以便使用GitHub pages 发布和预览静态网页. 针对以上问题,作者以往的做法是将Vue项目源码托管到源码仓库,然

  • Vue项目打包部署到apache服务器的方法步骤

    Vue项目打包部署到apache服务器的方法步骤

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下: 然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms 遇到的问题: 1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!

  • Vue项目打包部署的实战过程记录

    Vue项目打包部署的实战过程记录

    目录 前言 一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件 二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题 四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下

  • Vue项目打包部署到iis服务器的配置方法

    Vue项目打包部署到iis服务器的配置方法

    一 将Vue项目打包 切换到项目目录下,输入cnpm run build 打包 等待打包完成 二 URL 重写 访问我们的一个url 原因是vue不是根据项目目录的地址访问的,是根据vue-router转发路由访问url,在这里我们应该进行url rewrite url write的方式有两种,一种是在iis下载url rewrite工具配置规则 另一种是配置web.config文件,我用的是第二种 web.config内容 <?xml version="1.0" encodin

  • vue项目打包部署_nginx代理访问方法详解

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

  • vue项目打包部署流程分析

    目录 一.打包 二.部署 三.部署多个项目 一.打包 (可选)去除打包后会生成的map文件:在vue.config.js中添加productionSourceMap: false, map文件作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错.map文件可以准确输出报错位置. 项目终端运行npm run build,出现的dist文件即为打包后的文件 二.部署 xshell连接服务器(此处服务器为centos7) 利用xfp在服务器/root目录

  • vue项目打包部署到服务器的方法示例

    vue项目打包部署到服务器的方法示例

    上上一篇我写过一些关于vue项目部署到linux服务器的文章,但是那是以node作为开发环境 pm2 守护进程的方式,让他能正常运行,可是还是出现了问题,因为属于与APP交互的页面,在webView中打开过慢,APP的用户体验非常的差,所以我查找了资料,改变了部署方式,接下来我介绍一下 这一次,我想Tomcat为例 我们先看一下Linux中 Tomcat下面的目录结构: 以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js,这里可以看到assetsPubl

  • vue项目打包部署后默认路由不正确的解决方案

    vue项目打包部署后默认路由不正确的解决方案

    目录 打包部署后默认路由不正确 问题描述 解决方案 vue打包后路径不对 对于背景图片不显示的问题 动画无法运行 小图标没了 打包部署后默认路由不正确 问题描述 vue项目本地开发的时候默认路由没问题,例如 redirect:"/index" 但是部署以后,服务器上默认路由不正确,现在遇到的问题是,会默认跳转到login页面,前提项目没有做路由权限. 解决方案 打开路由index.js文件,添加:base:"/" const routers = new Router

  • Vue项目打包并部署nginx服务器的详细步骤

    Vue项目打包并部署nginx服务器的详细步骤

    目录 使用场景: 一.打包 二.部署(nginx) 总结 使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署. 一.打包 vue项目其实可以直接通过一下语句进行打包: npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建vue.config.js文件 配置内容如下所示(附带跨域问题解决): module.exports = { //打包 publicPath: './', output

随机推荐