我使用 Vue CLI 使用 Vue.js 和 Vuetify 创建了一个项目。我想用 Github Pages 托管这个应用程序。所以我从这里拿了一个指南
我不使用 Vue 路由器 (https://router.vuejs.org/guide/essentials/history-mode.html) 的历史记录来确保我不需要服务器。
我创建了我的项目的构建并将生成的 dist 文件夹重命名为 docs。此 docs 文件夹位于根目录（生成它的位置）中。当我选择 master branch /docs 文件夹 作为我的 Github Pages 发布源时，我得到一个空白页。
当我检查控制台时，我得到一个
加载资源失败：服务器响应状态为404()
对于 dist/docs 文件夹中生成的每个文件。我错过了什么？
【问题讨论】：
标签： vue.js github-pages vuetify.js vue-cli vue-cli-3
这可能是您的应用程序的根路径设置为查看您的 github 的根目录而不是存储库的根目录。
看起来您正在使用标签中的 vue-cli-3。下面是我为部署 Vue 应用程序以托管在 github 页面上所做的工作。
在应用的根目录中创建一个vue.config.js 文件。
在该文件中，设置公共路径以匹配存储库名称。
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 而不是 docs。由于您提到您没有为 vue-router 使用 history 模式，因此您应该在 URL 字符串中看到 # 并且当用户在 home 以外的其他路由上刷新页面时它会起作用。
希望这有助于为您在 github 页面上部署和托管 Vue 应用指明正确的方向。
【讨论】：
deploy.sh 文件运行的构建命令期间创建的 dist 文件夹的内容。 gh-pages 分支当前具有与master branch 相同的文件。它不应该有 readme.md 这就是显示该页面的原因，但应该在 gh-pages 的根目录下有一个 index.html，其中包含所有已编译/捆绑资产的文件夹，这些资产内置在 dist 文件夹中。
我添加 vue.config.js 文件，并修改 webpack 配置，像这样
module.exports = {
outputDir: 'docs'
}
【讨论】：