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

Question

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

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

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

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

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

Failed to load resource: the server responded with a status of 404 ()

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

Answer 1

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

您似乎也在使用标签中的 vue-cli-3。所以这就是我为部署要在 github 页面上托管的 Vue 应用程序所做的工作。

在您的应用程序的根目录中创建一个 vue.config.js 文件。
在该文件中，设置 public 路径以匹配存储库名称。

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

在您的应用程序的根目录中创建一个 deploy.sh 文件。
在文件中，写入如下内容

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 -

现在，您可以从命令行在应用程序的根目录中运行 sh deploy.sh。这将运行 vue-cli 的构建命令，进入 dist 文件夹，提交这些文件并将它们推送到 gh-pages 分支。
然后您可以将 github 存储库设置为使用 gh-pages 而不是文档。由于您提到您没有为 vue-router 使用 history 模式，您应该在 URL 字符串中看到 # 并且当用户在除主页以外的其他路径上刷新页面时它会起作用.

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

Answer 2

我添加vue.config.js文件，然后修改webpack配置，像这样

module.exports = {
  outputDir: 'docs'
}

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

build and publish dist folder to github pages

github-pages

vue.js

vuetify.js

vue-cli

vue-cli-3