[英]Workbox loading wrong dynamic import url
我正在为 laravel/vuejs 应用程序使用工作箱和 babel 动态导入。 我还使用laravel-mix
和laravel-mix-workbox
插件通过generateSW()
编译和生成服务工作者。
根据 vue-router 中设置的条件,资产已正确加载到根 url https://myapp.test/
中。 像这样: https://myapp.test/assets/js/chunk1.js
。 当我访问像https://myapp.test/post/post1
这样的子页面时,与页面相关的块也被正确加载。 到目前为止,一切都很好!
但是当我直接访问一个帖子页面( https://myapp.test/post/post1
)时,动态资产 url 会附加到最新的斜杠上,这意味着https://myapp.test/post/assets/js/chunk1.js
并且无法加载它们。 好像根 url 被设置为我们访问的第一页。
我尝试在 webpack 配置中添加output.path
和output.publicPath
,但它们没有帮助。
相关包:
"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",
}
生成SW配置:
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,
});
感谢您的时间。
我终于通过向我的 html <head>
添加一个<base>
标记来修复它。 原来这是工作箱确定基础 URL 的地方。
<base href="https:://myapp.test/">
在我的情况下,Laravel:
<base href="{{config('app.url')}}">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.