工作箱加载错误的动态导入 url
Posted
技术标签:
【中文标题】工作箱加载错误的动态导入 url【英文标题】：Workbox loading wrong dynamic import url 【发布时间】：2021-06-12 15:52:39 【问题描述】：我正在为 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）访问帖子页面时，动态资产网址会附加到最新的斜杠上，即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,
);
感谢您的宝贵时间。
【问题讨论】：
【参考方案1】：我终于通过在我的 html <head> 中添加 <base> tag 来修复它。原来这是工作箱确定基本 URL 的地方。
<base href="https:://myapp.test/">
我在 Laravel 中的任何情况：
<base href="config('app.url')">
【讨论】：
以上是关于工作箱加载错误的动态导入 url的主要内容，如果未能解决你的问题，请参考以下文章
Angular 8 - 延迟加载模块：错误 TS1323：仅当“--module”标志为“commonjs”或“esNext”时才支持动态导入