如何在 GitHub Pages 上使用 Vue.js

我最近阅读了GitHub Pages 上的文章“服务 Vue.js 应用程序” ，它启发了我写下我正在做的不同的事情。

如果你想查看此方法的实际示例，请访问我在GitHub上的个人网站

我不会解释如何设置 Vue 项目。如果你正在寻找这方面的教程，可以查看精彩的Vue.js 指南。

假设你已经搭建好了很棒的 Vue 项目，并想把它托管在 GitHub Pages 上。Muhammad 解释道，你需要使用 构建项目npm run build，提交 distdist/文件夹和源文件，并将 GitHub 指向 dist 文件夹。这可能会变得相当混乱，因为你要么提交了唯一的提交信息，目的只是为了上传 dist 文件夹，要么同时提交了代码更改，这使得如果你想再次查看提交内容时很难找到相关的更改。

那么你能做些什么呢？

Git 来救援，让我们使用包含所有构建文件的分支。

步骤 1 - 保持工作分支清洁

为了确保我们正在工作的分支没有任何构建文件，我们将向.gitignore根目录添加一个文件。

# .gitignore
dist/

第 2 步 - 添加第二个分支

我们不会像修改代码并打算将其合并回主分支那样，从 master 分支创建分支。相反，我们会创建一个干净的新分支，只保存 dist 文件。毕竟，我们永远不需要将这两个分支合并在一起。

我们通过在 dist 文件夹中创建一个新的 git 存储库来实现此目的：

cd dist/
git init
git add .
git commit -m 'Deploying my awesome vue app'

步骤 3 - 部署

我们将把新的 git 仓库强制推送到 GitHub 的一个分支。这可能违反了 git 的最佳实践，但由于我们永远不会检出这个分支，所以我们不必担心。

git push -f git@github.com:<username>/<repo>.git <branch>

⚠️ 务必仔细检查你的目标分支！你肯定不想意外覆盖你的工作分支。使用目标分支gh-pages很可能是个好主意。

步骤 4 - 将 GitHub 指向正确的位置👈

现在我们快完成了。剩下唯一要做的就是告诉 GitHub 我们的资产存放在哪里。

前往你的仓库，在右上角导航到SettingsGitHub 页面并向下滚动到该页面。启用它，并将源分支设置为你强制推送到的分支，例如gh-pages。

第五步 - 自动化一切

如果你不介意每次部署时都重复一遍这整个过程（步骤 2 和 3），现在就可以停止了。如果你和我一样懒，下面是我用来部署的脚本，只需一个命令：

# deploy.sh

#!/usr/bin/env sh

# abort on errors
set -e

# build
echo Linting..
npm run lint
echo Building. this may take a minute...
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'example.com' > CNAME

echo Deploying..
git init
git add -A
git commit -m 'deploy'

# deploy
git push -f git@github.com:<username>/<repo>.git <branch>

cd -

如果您在 Windows 上查看 Windows Linus 子系统 (WSL)，那将是值得的。

如果你还在读，非常感谢。这实际上是我的第一篇文章，我很高兴听到任何意见和批评。
祝你编码愉快♥