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

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/'
}

..it断开所有其他脚本的链接。

当我在本地运行该应用程序并获得PWA支持时，该应用程序即可运行。 任何人都知道如何使它与子文件夹/ github页面一起使用吗？

谢谢

Answer 1

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

您应该将其提交到gh-pages分支并代替它。

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