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

Posted 2023-02-22

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

【英文标题】：Vue.js PWA Plugin not loading service-worker.js when deployed to subfolder (Github Pages)

【发布时间】：2018-07-27 15:32:33

【问题描述】：

我使用 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_URLservice-worker.js`, 

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

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

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

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

谢谢

【参考方案1】：

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

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

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

【讨论】：

我使用的 vue-gh-pages 插件允许您运行构建项目 (npm run build) 并将其部署到 GH 的 npm 脚本。

@GarySimon 啊，错过了。你可能需要在那个 repo 上打开一个问题，因为有些东西没有正确转换。

@GarySimon 无论如何，它不会从src 提供服务，它将从dist 提供服务。您可以看到，因为该插件仍然在内部运行 build，然后将 dist 复制到 this line。