Webpack 工作箱'；的precache清单文件在Laravel混合设置中包含无效的URL字符串

我正在使用Workbox 3.0（webpack插件）和Laravel Mix（5.6）自动生成ServiceWorker文件

运行webpack编译器时，Workbox为预缓存资产生成的清单文件如下所示：

self.__precacheManifest = [
  {
    "revision": "89c25ce71806a695a25e",
    "url": "//js/app.js"
  },
  {
    "revision": "89c25ce71806a695a25e",
    "url": "//css/app.css"
  }
];

self.__precacheManifest = [
  {
    "revision": "b922e094256b9404e705",
    "url": "//js/app.js"
  },
  {
    "revision": "b922e094256b9404e705",
    "url": "//css/app.css"
  }
];

显然，URL字符串是错误的，并且会在实际网页上导致错误

这是我的webpack.mix.js：（相关部分）

虽然InjectManifest在这里用于预缓存以及我自己的动态缓存，但在使用GenerateSW插件时也会发生同样的情况

我的源代码sw.js：

你知道怎么解决这个问题吗？如果我手动修改Prechemanifest，它可以正常工作：

self.__precacheManifest = [
  {
    "revision": "89c25ce71806a695a25e",
    "url": "./js/app.js"
  },
  {
    "revision": "89c25ce71806a695a25e",
    "url": "./css/app.css"
  }
];

复制此内容的步骤：

创建新的Laravel项目：

Laravel new

cd

npm安装

npm安装--保存dev workbox网页包插件

将以下行添加到webpack.mix.js，以便为Workbox配置：

const{GenerateSW}=require（'workbox-webpack-plugin'）

webpackConfig（{plugins:[new GenerateSW（）]}）

运行

php-artisan-make:auth

和

php-artisan-migrate

以完成前端搭建

编辑\resources\assets\js文件夹中的bootstrap.js，以包含注册新ServiceWorker的常用代码

运行

npm运行dev

编译的预缓存清单文件如下所示：

self.__precacheManifest = [
  {
    "revision": "89c25ce71806a695a25e",
    "url": "//js/app.js"
  },
  {
    "revision": "89c25ce71806a695a25e",
    "url": "//css/app.css"
  }
];

self.__precacheManifest = [
  {
    "revision": "b922e094256b9404e705",
    "url": "//js/app.js"
  },
  {
    "revision": "b922e094256b9404e705",
    "url": "//css/app.css"
  }
];

我找到了解决办法：

由于Laravel使用“Laravel Mix”API来配置和运行WebPack，因此配置WebPack的方法是修改文件

WebPack.Mix.js

杰夫·波斯尼克为我指出了正确的方向。如果我将以下行添加到

webpack.mix.js

，编译器将生成正确的预缓存清单文件-

const { GenerateSW } = require('workbox-webpack-plugin');
mix.webpackConfig({
  plugins: [new GenerateSW()],
  output: {
    publicPath: ''
  }
});

解决方案是为webpack的output.publicPath配置选项提供一个空字符串

---

但是，如果需要为publicPath选项提供实际路径，此解决方案将失败。请参阅此处的错误报告：

我尝试将例如importsDirectory:“./public”添加到webpackConfig对象，但没有效果。您的webpack配置中的

输出.publicPath

值是什么？我实际上没有直接修改webpack.config.js文件-这都是由Laravel Mix处理的。但是查看node_modules目录（node_modules/laravel mix/setup）中的webpack.config.js文件，那里也没有定义publicPath。生成这些URL的代码是它有效地连接了

publicPath

和webpack为资产创建的隐式URL。你能提供一个链接到你的完整项目，我们可以克隆并尝试在本地复制吗？我添加了一些步骤，使用带有Workbox的标准Laravel安装从头开始复制这个问题。除非我加载一个带有路径的页面，否则这个工作正常。例如，在我的页面

/goals/add/

上，它试图加载显然不存在的

/goals/js/44.94b7a16456b6a9589b3f.js

。有什么想法吗？