Vue.js PWA 插件在部署到子文件夹时不加载 service-worker.js (Github Pages)

Question

我使用 Vue CLI 创建了一个新的 Vue 项目，并在使用 'vue create' 时选择了 PWA 支持。

我还使用 vue-gh-pages 插件将应用程序部署到 github pages URL。

问题是它正在尝试加载 http://myusername.github.io/service-worker.js ..代替： http://myusername.github.io/app-name/service-worker.js

在/src/registerServiceWorker.js里面我注意到了：

register(`${process.env.BASE_URL}service-worker.js`, {

但是当我尝试在 vue.config.js 中设置 BASE_URL 时：

module.exports = {
   baseUrl: '/app-name/'
}

..它会破坏所有其他脚本的链接。

当我在本地运行该应用程序以及 PWA 支持时，它可以正常工作。任何人都知道如何让它与子文件夹/ github页面一起使用？

谢谢

Answer 1

我认为您在部署项目之前忘记了构建项目。如果您正在运行使用构建过程的 Vue CLI，您应该运行 npm run build，这将生成一个 dist 文件夹，其中包含您作为静态包的所有资源。

您应该将 that 提交到您的 gh-pages 分支并改为提供它。

我这么说是因为process.env.BASE_URL 是node.js 方面理解的东西。 GitHub 页面不会在运行时为您填充这些内容，因为它只提供静态内容。