Vue 项目部署到GitHub Pages

部署前注意事项

vue-router 不要开启 history 模式

正常项目中我们会因为网站路径中带有“#”而将vue-router开启history模式，以去掉#号。但开启history模式需要服务器的支持，因此在github pages中不支持这一模式，所以我们不能开启history模式。

在 vue.config.js 中设置正确的 publicPath

要将项目部署到 https://.github.io// 上 (即仓库地址为 https://github.com//)，可将 publicPath 设为 “//”。

  publicPath: process.env.NODE_ENV === 'production' ? '/project/' : '/',

然后可以直接将项目推送至仓库。

接下来部署

在项目根目录创建deploy.sh 文件

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下 
cd dist

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

# 部署到 https://.github.io/
git push -f [email protected]:/.git master:gh-pages

cd -

在项目目录下打开cmd命令窗口运行该文件

// Linux环境下
bash deploy.sh
// Windows环境下
deploy.sh

运行后，git就会执行该文件里的命令。大致就是，构建打包项目代码，然后将打包后的代码上传到仓库中的 gh-pages 分支。（注意：新建的仓库默认只有master分支，没有gh-pages分支，但不需要你手动新建该分支，运行该文件后，会自动帮你生成gh-pages分支）
这样，你的项目就已经部署到github pages 了。在你的github项目的 Settings - Options 下的 GitHub Pages项里，可以看到你的项目线上网站地址。

通过上面的步骤已经可以部署一个类似 username.github.io/project/ 的项目了。但是，我们在部署个人网站或者博客时不想要这个 project/ 的后缀，可以在创建仓库时, 将仓库名填写为username.github.io  (username是你的用户名)