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

Question

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

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

  

有源“https://christopherkade.com/static/js/manifest.5f330dcceda3a8431045.js”的加载失败。

     

有源“https://christopherkade.com/static/js/vendor.d99d5ed4cd2156cc1a6f.js”的加载失败。

     

有源“https://christopherkade.com/static/js/app.ccc0f9d5d6f02f3b3285.js”的加载失败。

请注意，我已尝试在assetsPublicPath中将'./'更改为config/index.js，并将<base href="/">添加到index.html。

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

Answer 1

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

我有一个＆＃34;发布＆＃34; package.json中的脚本自动执行此操作

"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

我同样按照一些 stackoverflow 和 github 帖子中的说明以及 vue 部署说明 https://cli.vuejs.org/guide/deployment.html 进行了一些反复试验。我不知道您是否必须进行所有这些更改，因为我还没有尝试删除任何更改，但这是我发现有效的更改的完整列表。

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