1、vue cli 部署到 github

• 最近刚刚做好了一个以 Vue 为技术栈的一个小应用，部署到 github 。
• 首先按 vue cli 的部署方法往下走，首先使用一个 Node.js 静态文件服务器 serve

yarn global add serve

serve -s dist

• github 建立一个名为 MyMoneyBook-1 的仓库用于放置源代码，并把项目内容上传提交

git remote add origin git@github.com:xxx
git push -u origin master

• 再新建一个仓库，名为 MyMoneyBook-1-website 用于存放预览的网站
• 在 vue.config.js 中设置正确的 publicPath。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/MyMoneyBook-1-website/'    //MyMoneyBook-1-website 就是新建的仓库名
    : '/'
}

• 在项目目录下，创建内容如下的 deploy.sh

#!/usr/bin/env sh

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

# 构建
npm run build

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

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

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

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages   //修改其中 git@github.com:<USERNAME>/<REPO>.git 作为自己的仓库路径

cd -

• 运行：

sh deploy.sh

• 然后就可以在 github 的 settings 选项中找到预览链接啦！

2、把项目部署到 gitee

• 前面的步骤都是相同的
• 把项目源码上传到 gitee 的 MyMoneyBook-1 仓库中

git remote set-url origin git@gitee.com:xxx
git push -u origin master

• 也是同样的步骤，创建 MyMoneyBook-1-website 仓库，并使用 sh deploy.sh上传

但是在生成预览链接后，出现了问题，无法加载出页面！

• 我搜索了各种关于 vue 部署到码云的问题
• 使用了码云的 单页面应用支持，添加 .spa 文件，无效
• 搜索了 ERR_TOO_MANY_REDIRECTS 报错的问题，无效

找了各种方法，终于找到了解决方法：

• 由于码云 Gitee Pages 服务的网站地址均为小写，vue.config.js 中的publicPath 设置为 小写

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/mymoneybook-1-website/'    
    : '/'
}

• 成功解决，能够预览！