Workbox loading wrong dynamic import url
Question
I am using workbox & babel dynamic imports for a laravel/vuejs application. I am also using laravel-mix and laravel-mix-workbox plugin to compile and generate service worker via generateSW() .
The assets are are loaded correctly in the root url https://myapp.test/ based on conditions set in vue-router. like so: https://myapp.test/assets/js/chunk1.js . When I visit child pages like https://myapp.test/post/post1 , the chunks relating to the page are loaded correctly also. So far so good!
But when I visit a post page directly ( https://myapp.test/post/post1 ), the dynamic asset urls are appended to the latest slash, meaning https://myapp.test/post/assets/js/chunk1.js and fails to load them. As if the root url is set as the first page we visit.
I have tried adding output.path & output.publicPath in webpack config, but they did not help.
Related packages:
"devDependencies" {
"workbox-webpack-plugin": "^6.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"laravel-mix": "^5.0.9",
"laravel-mix-workbox": "^0.1.4",
}
generateSW config:
mix.generateSW({
mode: 'development',
runtimeCaching: [
{
urlPattern: /\.(?:jpg|jpeg|svg|png|json)$/,
handler: 'CacheFirst',
},
{
urlPattern: /api($|\/?.*)/,
handler: 'NetworkFirst'
}
],
exclude: [
/(backend.css|backend.js)/
],
include: [
/\.(?:ttf|js|css|glb)$/,
/(\/font.png)/
],
skipWaiting: true,
});
Thank you for your time.
1 answers
solution1
0 ACCPTED 2021-03-15 11:20:49
I finally fixed it by adding a <base> tag to my html <head> . Turns out this is where workbox determines base URL.
<base href="https:://myapp.test/">
Any in my case in Laravel:
<base href="{{config('app.url')}}">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.