Vue 项目部署到GitHub Pages

前言：相信很多前端开发者都拥有自己的vue项目，若想把自己的项目做成网站分享给大家看，最常用的就是利用Github提供的GitHub Pages服务和Gitee提供的Gitee Pages服务。其中，Github是国外网站，Gitee是国内网站（访问速度较快）。本文给大家介绍的是如何将 vue-cli 3.0+项目部署到github pages

项目配置注意事项

1、vue-router 不要开启 history 模式

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

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

要将项目部署到 https:// .github.io/ <REPO>/ 上 (即仓库地址为 https://github.com/ <USERNAME>/ <REPO>)，可将 publicPath 设为 "/ <REPO>/"。
举个例子，我的仓库名字为“ home_page”，那么 vue.config.js 的内容应如下所示：

// vue.config.js
const ENV = process.env.NODE_ENV;

module.exports = {
  publicPath: ENV === "development" ? "" : "/home_page/", # 关键代码
};

部署github项目

手动推送更新

在项目根目录下，创建内容如下的 deploy.sh 文件

# `deploy.sh`

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

# 构建
yarn build

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

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

git remote add origin https://gitee.com/cjh-1996/home_page.git
# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f origin master

cd -