Github 页上 VueJS 应用程序的空白页

Question

我已经在以下 repository 的 gh-pages 分支上部署了一个 Vue 应用程序。

但是访问 https://christopherkade.com/STracker 在 Firefox 上出现以下错误（在其他浏览器上出现类似错误）：

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 更改为 './'，并将 <base href="/"> 添加到我的 index.html。

什么可能导致这样的路径问题？

Answer 1

我所做的是更改 /dist 文件夹中的 index.html 文件。从静态中删除 /。并将其复制到文档文件夹。我的 github 页面指向那个分支。

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

"publish": "npm run build && rm -rf docs; cp -r dist docs && sed -i -e 's/src=\//src=/g' docs/index.html ; sed -i -e 's/href=\//href=/g' docs/index.html"

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

Answer 2

我同样通过一些试验和错误让我的工作，遵循许多 Whosebug 和 github 帖子的说明，以及 vue 部署说明 https://cli.vuejs.org/guide/deployment.html。我不知道您是否必须进行所有这些更改，因为我没有尝试删除任何更改，但这是我发现有效的更改的完整列表。

在项目根目录创建一个vue.config.js文件并添加 publicPath 设置与我的回购名称。 (publicPath: '//')
将 vue 路由模式从 history 更改为 hash（模式：'hash'）
正在删除配置 index.js 文件中的路径。你这样做将 assetsPublicPath: '/' 更改为 assetsPublicPath: ''。这个可能比在 index.html 文件中手动操作更干净，因为有些回复建议。
Adding/changing路由器中的vue路由器基础 index.js 文件（基础：‘//’）
完成所有这些更改后构建项目
正在部署项目。我没有遵循完整的 deploy.sh 说明。然而，我使用的 git 命令是添加文件（git add –A），提交文件（git commit –m 'deploy'），然后将分发文件推送到gh-pages 分支（git subtree push --prefix dist origin gh-pages）。当然，这将添加和提交所有内容，而 vue 说明更加集中。
正在将 github 页面设置指向 gh-pages 分支。

Answer 3

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

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

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

Github 页上 VueJS 应用程序的空白页

Blank page for a VueJS app on Github pages

github-pages

vue.js

vuejs2