我正在使用带有 vue cli 3 的 workbox webpack 插件,我想排除文件夹中的文件被添加到预缓存 list 。

在下面查看我当前的文件结构

/源
/ Assets
/css
/ shell
文件1.svg
文件2.svg
文件3.svg
/svg
文件4.svg
文件5.svg
文件6.svg

我想将 shell 文件夹中的文件包含在我的预缓存 list 中,但我不想将这些文件包含在 svg 文件夹中。

我已经尝试在 vue.config.js 文件中使用 globIgnores 和 exclude 选项 workboxOptions 但我没有得到想要的结果。

当我尝试 globIgnores: ['src/assets/svg/*'] 时,没有发生任何事情,因为所有文件都包含在内

当我尝试 exclude: [/\.svg$/] 时,它​​排除了两个文件夹中的 svg 文件。

我试图改变下面的排除选项的匹配模式,但它也不起作用:

exclude: [/^file4.*\.svg$/,
          /^file5.*\.svg$/,
          /^file6.*\.svg$/]

最佳答案

我遇到了一个类似的问题,如果不一样的话,并且在盯着这里的文档看了一会儿后能够梳理出一个答案:

https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#generateSW-exclude

我想自动生成预缓存 list ,但排除特定文件夹以及特定文件名。所以,我的 vue.config.js 现在是这样的:

pwa: {
  workboxOptions: {
    exclude: [
      /index\.html$/,
      /client-config\.js$/,
      /^.*folder-to-exclude\/.*$/,
    ]
  }
}

exclude/include 属性是正则表达式或字符串数​​组。您的 exclude 表达式获取所有 svg 文件的原因很简单,因为根据您的正则表达式,您正在寻找以 .svg 结尾的任何内容。

你可以尝试这样的事情:
module.exports = {
    pwa: {
        appleMobileWebAppCapable: 'yes',
        appleMobileWebAppStatusBarStyle: 'black',
        workboxOptions: {
            include: [
                /^.*shell\/.*$/,
            ],
            exclude: [
                /^.*svg\/.*$/,
            ]
        }
    }
};

请记住,由于我们指定了 include ,因此我们不需要 排除 ,因为 Webpack 只会抓取您在 include 下要求的内容。但是,为了这个答案,我在上面的示例中添加了 包括/排除

测试所有这些东西而无需一遍又一遍地构建的一种方法是转到文件夹的根目录,在我的情况下是公共(public)文件夹,然后运行以下命令:
find .

这应该递归地获取所有文件/文件夹的列表并返回如下内容:
.
./svg
./svg/safari-pinned-tab.svg
./svg/safari-pinned-tab-2.svg
./svg/safari-pinned-tab-1.svg
./favicon.ico
./index.html
./shell
./shell/android-chrome-192x192.png
./shell/android-chrome-512x512.png
./img
./img/icons
./img/icons/favicon-16x16.png
./img/icons/safari-pinned-tab.svg
./img/icons/apple-touch-icon-120x120.png
./img/icons/android-chrome-192x192.png
./img/icons/apple-touch-icon.png
./img/icons/apple-touch-icon-152x152.png
./img/icons/apple-touch-icon-180x180.png
./img/icons/apple-touch-icon-76x76.png
./img/icons/android-chrome-512x512.png
./img/icons/msapplication-icon-144x144.png
./img/icons/mstile-150x150.png
./img/icons/apple-touch-icon-60x60.png
./img/icons/favicon-32x32.png
./robots.txt

然后,获取该输出并转到 regex101.com 并尝试匹配您的用例的 include exclude 表达式。下面是一个例子:

https://regex101.com/r/nzEwCz/2/

我发现这只会帮助缩小表达式的范围,您需要在 IDE 中对其进行改进。我知道这是一个相当冗长的答案,如果您有任何问题,请在下面发表评论。

注意: 在 Windows 机器上的表达式可能会有所不同,请参阅此问题/答案:https://stackoverflow.com/a/38190159/128795

关于vue.js - workbox webpack 插件从预缓存 list 中排除文件夹,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55438555/

10-12 07:39
查看更多