如何将vue项目发布到github的pages

将开发好的vue前端项目部署到github的pages服务上，不仅方便而且节省了购买服务器的开支。

Version

Vue 2.5.22
Vue CLI 3.1.3

初始化Vue项目

执行 vue create vue-github-src 命令。
选择 Manually select features，后回车。
使用空格反选掉Linter / Formatter，保持只选择 Babel后按回车。
选择 In package.json，后回车。
输入 N，后回车。

得到 vue-github-src 项目目录，进入到目录中。

开发

安装axios发送ajax请求，yarn add axios -S

Index.vue

<template>
  <div>
    <ul>
      <li v-for="post in posts">
        {{ post.id }}: {{ post.title }}
      </li>
    </ul>

  </div>
</template>

<script>
import axios from 'axios';

const url = 'https://jsonplaceholder.typicode.com/posts';

export default {
  name: 'Index',
  data() {
    return {
      posts: [],
    }
  },
  mounted() {
    axios.get(url)
    .then(res => this.posts = res.data.slice(0, 5));
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

一個最简单的 Vue，从 API Server 获取数据展示。

建立Reposrtory

建立vue-github-src仓库存储源代码。

- 输入 repository 名称：`vue-github-src`
- 按 Create repository 建立新的 repository

按上面的步骤建立vue-github存放生成的静态文件。

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-github/'
    : '/',
};

在 project 根目录下建立 vue.config.js 设置 publicPath。

因为刚刚建立了 vue-github repository，将来目录如 https://curder.github.io/vue-github，因此设置 publicPath 为 /vue-github。

提交变更

git remote add origin [email protected]:curder/vue-github-src.git

git push -u origin master

部署脚本

#!/usr/bin/env sh

# abort on errors
set -e

# build
yarn build

# navigate into the build output directory
cd dist

git init
git add -A
git commit -m 'deploy'

git push -f [email protected]:curder/vue-github.git master

cd -

执行 deploy.sh build project 并推送到 GitHub。

sh ./deploy.sh

设定 GitHub Repository

在 vue-github 仓库页面找到 Settings按钮，点击。

跳转到GitHub Pages配置，选择 master branch 按下 Save。

出现了可访问的网页地址，如果想支持HTTPS，勾选Enforce HTTPS。

顺利将 Vue project 部署到 GitHub Pages 服务，如果无法访问，自行添加index.html。

如何将 vue 项目发布到 github 的 pages