我使用 Vue CLI 使用 Vue.js 和 Vuetify 创建了一个项目。我想使用 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-主分支 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
我是not使用 Vue Router 的历史记录（https://router.vuejs.org/guide/essentials/history-mode.html https://router.vuejs.org/guide/essentials/history-mode.html）以确保我不需要服务器。
我创建了项目的构建并将生成的 dist 文件夹重命名为 docs。此 docs 文件夹位于根目录（生成它的位置）中。当我选择master 分支 /docs 文件夹作为我的 Github Pages 发布源，我得到一个空白的白页。
当我检查控制台时，我得到一个
加载资源失败：服务器响应状态为404()
对于 dist/docs 文件夹中生成的每个文件。我缺少什么？
这可能是因为您的应用程序的根路径设置为查看 github 的根目录而不是存储库的根目录。
看起来您正在使用标签中的 vue-cli-3 。以下是我为部署托管在 github 页面上的 Vue 应用程序所做的工作。
创建一个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 gi[email protected] /cdn-cgi/l/email-protection:YOUR_USER_NAME/REPOSITORY_NAME.git master:gh-pages
cd -
现在，从命令行，在应用程序的根目录中，您可以运行sh deploy.sh。这将运行 vue-cli 的构建命令，进入 dist 文件夹，提交这些文件并将它们推送到 gh-pages 分支。
然后你可以将你的 github 存储库设置为使用 gh-pages 而不是文档。既然你提到你没有使用history对于 vue-router 模式，您应该在 URL 字符串中看到 #，并且当用户在除 home 之外的其他路由上刷新页面时它将起作用。
希望这能帮助您指明在 github 页面上部署和托管 Vue 应用程序的正确方向。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
