Github pages上显示空白页面的VueJS应用

Question

我已将Vue应用部署在以下存储库的gh-pages分支上：repository。但是，在Firefox（以及其他浏览器）中访问https://christopherkade.com/STracker会出现以下错误：

Loading failed for the with source “https://christopherkade.com/static/js/manifest.5f330dcceda3a8431045.js”.

Loading failed for the with source “https://christopherkade.com/static/js/vendor.d99d5ed4cd2156cc1a6f.js”.

Loading failed for the with source “https://christopherkade.com/static/js/app.ccc0f9d5d6f02f3b3285.js”.

请注意，我尝试在config/index.js中更改assetsPublicPath为'./'，并在index.html中添加了<base href="/">。是什么原因导致了这样的路径问题？

- Christopher

---

https://learnvue.co/tutorials/deploy-vue-to-github-pages 这真的帮助了我。 - ht006

Answer 1

我所做的是更改/dist文件夹中的index.html文件。将static中的/移除，然后将其复制到docs文件夹中。我的Github页面指向该分支。

我在package.json中有一个“publish”脚本，可以自动执行此操作。

示例使用简单的webpack模板https://github.com/vitogit/vue-chessboard-examples，另一个使用webpack模板https://github.com/vitogit/vue-chess-guardian。

- vitomd

---

但这意味着我指向的是/docs文件夹，而不仅仅是gh-pages分支，对吧？我会尝试从静态文件中删除“/”，并查看结果。编辑：它实际上起作用了！我将使用你的脚本的一部分，并看看能做些什么，谢谢！ - Christopher

虽然我现在遇到了以下问题：URL 跳转到 https://christopherkade.com/login 而不是 https://christopherkade.com/STracker/login，这意味着当我重新加载页面时，它会带我回到 https://christopherkade.com。 - Christopher

我猜测是你的路由器出了问题。但我不确定能否帮到你，因为我没有在 GitHub Pages 上使用过路由器。 - vitomd

问题已解决，我只需要更改路由器重定向到/STracker/login而不是/login！无论如何还是谢谢。 - Christopher

Answer 2

对我来说，我需要在vue.config.js中更改我的publicPath。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
  ? '/GitHub-Repo-Name/'
  : '/'
}

在这种情况下，我将部署到 https://username.github.io/GitHub-Repo-Name/。

- Nolan Strait

Answer 3

我也是通过一些试错，遵循了一些stackoverflow和github的帖子以及vue部署指南https://cli.vuejs.org/guide/deployment.html，最终让我的工作正常运行。我不知道你是否需要进行所有这些更改，因为我没有尝试过删除任何一个，但这是我发现有效的完整更改列表。

1. 在项目根目录下创建一个vue.config.js文件，并添加publicPath设置为我的仓库名称。(publicPath: '//')
2. 将vue路由器模式从history更改为hash (mode: 'hash')
3. 在配置index.js文件中删除路径。您可以通过将assetsPublicPath：'/'更改为assetsPublicPath：''来完成此操作。这可能比在index.html文件中手动执行要干净一些，正如某些响应所建议的那样。
4. 在路由器index.js文件中添加/更改vue路由器基础(base: '//')
5. 在进行所有这些更改后构建项目
6. 部署项目。我没有完全遵循deploy.sh说明。但是我使用的git命令是添加文件（git add -A），提交文件（git commit -m 'deploy'），然后将分发文件推送到gh-pages分支（git subtree push --prefix dist origin gh-pages）。当然，这将添加和提交所有内容，而vue说明更加专注。
7. 将github页面设置指向gh-pages分支。

- RodP