构建 dist 文件夹并将其发布到 github 页面

Question

我使用 Vue.js 和 Vuetify 使用 Vue CLI 创建了一个项目。我想用 Github Pages 托管这个应用程序。所以我从这里拿了一个指南

https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages#publishing-your-github-pages-site-from-a-docs-folder-on-your-主分支

而且我没有使用 Vue Router ( https://router.vuejs.org/guide/essentials/history-mode.html )的历史记录来确保我不需要服务器。

我创建了我的项目的构建并将生成的 dist 文件夹重命名为 docs。此 docs 文件夹位于根目录（生成它的位置）中。当我选择master 分支 /docs 文件夹作为我的 Github Pages 发布源时，我得到一个空白页面。

当我检查控制台时，我得到一个

加载资源失败：服务器响应状态为 404()

对于在 dist/docs 文件夹中生成的每个文件。我错过了什么？

Answer 1

这可能是您的应用程序的根路径设置为查看 github 的根目录而不是存储库的根目录。

看起来您也在使用标签中的 vue-cli-3。因此，这是我为部署要托管在 github 页面上的 Vue 应用程序所做的工作。

1. vue.config.js在应用程序的根目录中创建一个文件。

2. 在该文件中，设置公共路径以匹配存储库名称。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/YOUR_REPO_NAME/' : '/'
}

3. deploy.sh在应用程序的根目录中创建一个文件。

4. 在文件中写入以下内容

set -e

npm run build

cd dist

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

git push -f git@github.com:YOUR_USER_NAME/REPOSITORY_NAME.git master:gh-pages

cd -

5. 现在从命令行，在您的应用程序的根目录中，您可以运行sh deploy.sh. 这将运行 vue-cli 的构建命令，进入 dist 文件夹，提交这些文件并将它们推送到 gh-pages 分支。

6. 然后您可以将您的 github 存储库设置为使用 gh-pages 而不是 docs。由于您提到您没有使用historyvue-router 模式，您应该会在 URL 字符串中看到 #，并且当用户在除 home 之外的其他路由上刷新页面时，它将起作用。

希望这有助于为您指明在 github 页面上部署和托管 Vue 应用程序的正确方向。