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

Question

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

我还使用vue-gh-pages插件将应用程序部署到github页面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文件夹，其中包含您作为静态软件包的所有资源。

您应该那个到您的gh-pages分支机构并提供服务。

我之所以这样说是因为process.env.BASE_URL是事物的node.js方面所理解的。 GitHub页面不会在运行时为您填充，因为它只是静态地提供内容。