Question

我使用Vue.js创建了一个项目，并使用Vue CLI创建了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-master-branch

我不是使用Vue路由器（https://router.vuejs.org/guide/essentials/history-mode.html）的历史记录来确保我不需要服务器。

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

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

无法加载资源：服务器的状态为404（）

用于dist / docs文件夹中生成的每个文件。我想念什么？

Answer 1

这可能是因为应用程序的根路径设置为查看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运行build命令，进入dist文件夹，提交这些文件，然后将它们推送到gh-pages分支。
然后，您可以将github存储库设置为使用gh-pages而不是docs。既然您提到过您不在vue-router上使用history模式，所以您应该在URL字符串中看到＃号，并且当用户在除home以外的其他路由上刷新页面时，它会起作用。
< / li>

希望能为您指明在github页面上部署和托管Vue应用的正确方向。

Answer 2

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

module.exports = {
  outputDir: 'docs'
}

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

2 个答案: