[笔记] 将 Vue 专案自动布署到 Github Pages 上

章节连结

每次完成了一个 Vue 专案,要布署到 Github 上,往往要手动执行 npm run build 之类的指令才能看到结果。这样的重复动作,是可以写脚本 (Script) 让它自动化的。这篇就是笔记下自动布署到 Github Pages 上所需的细节。
vue.js logo vue


步骤

1. 先在自己 Github 上,新增一个 Repository,例如 Demo-Test
2. 因为最后在 Github 上的网址会是:https://<Your Github Account ID>.github.io/<Repository_Name,在这边的话为 Demo-Test>/,所以要在 Vue 专案的根目录内新增 vue.config.js

3. Vue.config.js 的设定如下:

4. 参照 Vue Cli 的官方教学,在 Vue 根目录下新增 deploy.sh,内容如下:

由于 Github 本身只支援 master / gh-pages 两种 branch 下的网页档案成为静态网页,所以你的分支名称就会受到限制。
-deploy-vue-project-to-github-pages


参考资料

1. Vue Cli Deployment
2. [Vue] 将Vue专案部署至Github Pages
3. Publishing sources for GitHub Pages sites


其他 Vue.js 相关文章

★全文分享★  [笔记] 在 Vue 中正确引用 src/assets 里的图片
[笔记] 在 Vue 中正确引用 src/assets 里的图片
在 Vue 专案内放于 src/assets 里面的图片档案,会在打包 npm run build 的时候一起被整合到最终的 img 资料夹。因此,若你要在 Vue 专案引用这些图片,要特别注意引用写法,以免无法显示。说明1. 你需
★全文分享★  [笔记] 将 Vue 专案自动布署到 Github Pages 上
[笔记] 将 Vue 专案自动布署到 Github Pages 上
每次完成了一个 Vue 专案,要布署到 Github 上,往往要手动执行 npm run build 之类的指令才能看到结果。这样的重复动作,是可以写脚本 (Script) 让它自动化的。这篇就是笔记下自动布署到 Github Pages 上
★全文分享★  [笔记] Vue 如何监控视窗宽度,并让每个 component 可以取用
[笔记] Vue 如何监控视窗宽度,并让每个 component 可以取用
Vue 的专案里,若要监测使用者的视窗大小宽度,最简便的方法就是在默认的根目录 Vue 档案里加上监听器,并将此值设置 vuex 中即可。概念1. 在根目录的 Vue 档案(App.vue),设置监听器,并在网页视窗
★全文分享★  [指南] 在 Vue 专案中,修改 样式方法
[指南] 在 Vue 专案中,修改 <body data-lazy-src=
★全文分享★  [笔记] 从 Vue CLI 3 开始建立规模化专案
[笔记] 从 Vue CLI 3 开始建立规模化专案
用 Vue CLI 3,可以快速的建立一个 Vue 专案。虽说是方便,但要能够规模化的管理 vuex, scss, vue-router 等等档案,还是要自己手动新增 / 删除一些东西。这边笔记下自己最新整理出的架构规划。事前准
★全文分享★  [笔记] 运用 Moment.js 制作 AM / PM 时间外挂
[笔记] 运用 Moment.js 制作 AM / PM 时间外挂
运用 Vue 和 Moment.js 来将 input-time 的 12 小时制时间,转换成 24 小时制传送到后端。运用套件和方法1. Vue-router:跳转到展示 Demo 页面2. Vue 的 v-model:双向绑定后,可以在 component 内即时处理3. Vue 的 wat
★全文分享★  [笔记] CodeSandbox 线上编辑器 模拟前端框架
[笔记] CodeSandbox 线上编辑器 模拟前端框架
随着前端框架的发展,当需要多人编辑、展示或是教学时,CodeSandbox 提供了一个很好的环境来给予模拟。除了 Vue 以外,React, Angular, Vanilla……等等都可以良好支援,同时也可以模拟专案资料夹结构
★全文分享★  [笔记] 工字型样板,长方形依照比例缩放
[笔记] 工字型样板,长方形依照比例缩放
这回要挑战工字型( I-Shape )的显示样板。同时,上头要叠加有个会随着数值比例而放大缩小的一个长方形。这边笔记下要如何用 CSS 和 Vue 的绑定 class 样式来实现。需求这回的样式需求如下:1. 上方
★全文分享★  [笔记] Element-UI 的自定义表格边框样式
[笔记] Element-UI 的自定义表格边框样式
Element UI 的表格算是非常常用的模组化套件之一,不过其表格边框样试算是非常难以处理的。这边笔记一下如何客制化的一些步骤(顿时觉得办公室文书软件要自定义样式简单多了)。需求这回的样式
★全文分享★  [笔记] Vue 关于 slot-scope 的简易认知
[笔记] Vue 关于 slot-scope 的简易认知
Vue 的 slot 系列使用方法,头一回在 Element-UI 这个模组上看见,觉得用法挺神奇的,于是便笔记一下个人对 slot 的理解,以及怎样的场景会使用到。核心概念slot 可以分为匿名、具名以及包含资料的 S
★全文分享★  [笔记] Vue Watch 监听并延后发送请求
[笔记] Vue Watch 监听并延后发送请求
当使用 Vue Watch 的事件监听时,若有要触发传送 XML 之类的事件时,屡屡发送的话会造成后端服务器的负担。你可以运用简单的 Promise + setTimeout 的技巧,就可以解决这个问题。背后原理1. 先在要启用
★全文分享★  [笔记] Element UI Table 表格表头纵向显示
[笔记] Element UI Table 表格表头纵向显示
这回在从事公司专案时,遇上了一个稍嫌难解的问题。在 Element UI Table 表格选项内,它默认是抓取每一个物件的 Key 值名称,然后对应的资料是由上往下显示的。不过若你想要客制化的将每一个物件
★全文分享★  [笔记] Vue SCSS 使用 Deep Selectors
[笔记] Vue SCSS 使用 Deep Selectors
在 Vue Sass 的使用方法上,若你有和其他的 Vue 套件一同使用,常会发生 css 选取困难的问题。Vue Loader 有提供所谓的 Deep Selectors,可以帮助你解决这些困扰,顺利改动套件的样式。程式码示范// scss v
★全文分享★  [笔记] Vue 使用 SCSS
[笔记] Vue 使用 SCSS
运用 Vue-cli 建立的专案,若要使用 SCSS 来较为语意化的管理自己的 css 档,需要事先做一些设定。这边笔记下直接在 .vue 中使用的方法和如何引入外部的 .scss 文件,并让 vue 可以加载 loader 读取编译
★全文分享★  [笔记] 自定义 Element UI 标题字段遇上 Vue/no-unused error 的解决方法
[笔记] 自定义 Element UI 标题字段遇上 Vue/no-unused error 的解决方法
在 Vue template 的档案,有时会需要运用到 slot-scope=”something” 的语法,但实质上并没有用到 something 的物件内容。这时可以传个 {} 空物件进去,就不会报 Vue/no-unused error 了。程式码示范这个 case 是发生
★全文分享★  [笔记] Vue 生命周期
[笔记] Vue 生命周期
每一个 Vue Instance 在创建时,都会经历过一个完整的生命周期,这算是 Vue 的初始化过程。在这个过程中,官方默认了许多的 hook 来提供开发者对于不同的阶段做操作。生命周期图周期类别beforeCreate
★全文分享★  [笔记] Vue 单元测试初探
[笔记] Vue 单元测试初探
随着程式开发越来越庞大,那么以“程式”测试“程式”是一件值得学习的投资了。除了节省时间外,也可以借机测试一下程式的逻辑是否如你所预期的。这边笔记下 Vue 的前端测试的初探与设定。
★全文分享★  [笔记] Vue2 Perfect-Scrollbar 置底开始
[笔记] Vue2 Perfect-Scrollbar 置底开始
Vue 的 Perfect-Scrollbar 套件,是 Vue 中满常使用的卷轴选单的套件。虽说有内建的一些自订样式的选项( 可用 options 加载),不过若要像聊天室一样,将卷轴条永远置底,这个就得自己另外设定。程式码
★全文分享★  [笔记] Vue 的状态管理 Vuex 实作心得
[笔记] Vue 的状态管理 Vuex 实作心得
Vuex 是 Vue 中用于状态管理的工具,你可以将每个页面、元件都会用到的“状态”(像是:登入的使用者资料),储存在前端使用者的浏览器中。因为在页面的切换中,并不会每次都向后端服务器认证
★全文分享★  [笔记] Vue 自订绑定 style 标签
[笔记] Vue 自订绑定 style 标签
Vue 中的 v-bind 有一些默认的 style 选项如 :disabled。不过若要客制化的 style 显示,像是 visibility:hidden 之类的,则可用 :style ={your-customized-style} 来搞定。语法// 若以绑定 visibility:hidden 选项,并依照一定
★全文分享★  [笔记] Body-Parser 无法解析的 FormData 解决方案 – multer
[笔记] Body-Parser 无法解析的 FormData 解决方案 – multer
运用 express 的框架来架设后端的 Node.js 服务器时,当遇上前端传来的表单资料为 multipart/form-data 格式时,那么 body-parser 套件是不支援的。这时可以运用 multer 套件来解决这个问题。使用范例1.首先先
★全文分享★  [笔记] Vue 页面元件定时自动跳转
[笔记] Vue 页面元件定时自动跳转
当 Vue 页面需要定时自动跳转的功能时,只需在该页面的 <script> 标签内撰写一小段程式码即可。在撰写如 404 自动跳转时可以不必再外挂其他的 JavaScript 了。步骤// 在 Vue 生命周期的 created 阶段
★全文分享★  [笔记] Vue 刷新当前页面
[笔记] Vue 刷新当前页面
Vue 的使用上,若是要进行完某个操作后重新刷新“当前页面”的话,用单纯的 redirect 是没有办法成功跳转的。这边要笔记下可以成功实现这个目标的方法。程式码示范// 在 App.vue 进行设定<template
★全文分享★  [全端开发] 打造一个公开聊天室 Vue.js+MySQL+Socket.io+passport-jwt
[全端开发] 打造一个公开聊天室 Vue.js+MySQL+Socket.io+passport-jwt
这回实际演练来打造一个即时聊天室来练功,使用者可以分为管理员和一般资格。其中使用到的主力套件和技术有:Vue.js, MySQL, Socket.io, passwort & passport-jwt, JavaScript, CSS, Bootstrap。规格开设 (SPEC) 使
★全文分享★  [笔记] BootstrapVue Pagination Vue 分页套件使用
[笔记] BootstrapVue Pagination Vue 分页套件使用
在网络世界中常用的前端 css 套件 – Bootstrap,搭配上前端框架 Vue,有好心人已经统整成了 BootstrapVue 的套件,让 Bootstrap 内的许多元件(components)有更多的运用。这回是要采用里头的 Pagination,并整合
★全文分享★  [笔记] Vue 避免 ESLint 的 Unexpected Console Statement
[笔记] Vue 避免 ESLint 的 Unexpected Console Statement
当运用官方套件迅速建立一个 Vue 专案后,若你是采用 ESLint 的规则,那么在除虫时会遇见 Unexpected console statement 的错误,这是由于 ESLint 的默认规则为 no-console 所导致的。这篇记载下解决这问题方
★全文分享★  [笔记] Vue-cli 输出 console.log 的结果
[笔记] Vue-cli 输出 console.log 的结果
使用 Vue-cli 输出页面结果到网页上时,若是需要输出错误结果的浏览器的 console.log 结果,会因为默认的 Eslint 语法规则检查而报错。这在开发阶段算是相当不方便的一件事。所以,这篇笔记下如何
★全文分享★  [笔记] Vue.js 前端分页、搜寻表格内容 – 运用 props, data, computed, methods, watch
[笔记] Vue.js 前端分页、搜寻表格内容 – 运用 props, data, computed, methods, watch
运用 Vue.js 前端框架,将发送到后端 API 请求的回传 json 档案,在页面上做出分页、搜寻表格的内容,而不用屡次变动资料就对后端发送请求。实作需求1.分页表格元件 (component) 的资料由父层的页面
★全文分享★  [笔记] 解决 Vue-cli 打包后,无法显示 Favicon 的问题
[笔记] 解决 Vue-cli 打包后,无法显示 Favicon 的问题
Vue-cli 运用 npm run build 将专案打包成静态档案给后端服务器存取后,常会遇到 Favicon (每个网页左上角的图示) 无法正常显示的问题。这篇笔记下各种解决这个问题的办法。语法// favicon// 1. 将 index.html
★全文分享★  [笔记] 全端开发本机端资料互通 Vue.config.js 设定
[笔记] 全端开发本机端资料互通 Vue.config.js 设定
在本机端执行前后端(全端)共同开发时,由于前后端都会各自启用自己的服务器,那么前端要怎样在本机端模拟发送请求到后端拿资料呢?若是运用 Vue.js 的前端框架,可以利用 Vue.config.js 的档案来
★全文分享★  [笔记] 解决 Vue 专案的 localhost:8080/sockjs-node 的无效请求
[笔记] 解决 Vue 专案的 localhost:8080/sockjs-node 的无效请求
这篇是解决不时在测试 Vue 专案上时,常会在浏览器的 console 内看见的无效 GET 请求如:http://localhost:8080/sockjs-node/info?t=<一串乱数>,要如何处理。步骤1.若是处在开发阶段看到的话,会因为你所
★全文分享★  [笔记] Vue.js & Node.js 专案初始化笔记
[笔记] Vue.js & Node.js 专案初始化笔记
这篇主要是笔记下如何快速的在本机端生成一个 Vue.js 的专案,并结合 Bootstrap 和 Node.js 二者来产生一个前后端兼备但却彼此分离的网络应用程式。步骤Vue.js 框架下,其网址多半会带有 # 字样。这是
按赞加入粉丝团

延伸阅读

GA瀏覽人氣:7