javascript - 如何使用 vue cli config 排除 PWA 中的特定路由？

Question

我在服务器上有两个不同的项目（或 repo）。其中一个是用 vue.js (SPA) 编写的，另一个是由静态站点生成器 ( mkdoc ) 创建的。

然后我将 PWA 添加到我的 SPA 项目（从这里），发生了一件奇怪的事情。在我的项目中，我导航到 example.com/help，但它显示了 404 页面，而/help route用于我的 mddoc 项目！

换句话说：

SPA Project domain: example.com
mkdoc Project domain: example.com/help

所以我在网上搜索并考虑了这个问题，我意识到为什么会出现这个问题！

我认为这是因为 PWA 中的服务人员！服务工作者缓存了项目的所有文件和资产。

现在我认为要解决这个问题，我应该防止缓存/help路由！但我不明白如何在vue cli中配置PWA 。vue.config.js

真的我不知道我们是否可以排除一条路线并防止与服务人员一起缓存！？

我该如何解决这个问题！？

vue.config.js

module.exports = {
  publicPath: '/',

  css: {
    loaderOptions: {
      sass: {
        prependData: `
            @import "@/assets/styles/_boot.scss";
          `
      }
    }
  },

  pwa: {
    name: "app",
    themeColor: "#004581",
    msTileColor: "white",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "white",

    iconPaths: {
      favicon32: 'img/icons/favicon-32x32.png',
      favicon16: 'img/icons/favicon-16x16.png',
      appleTouchIcon: 'img/icons/apple-touch-icon-180x180.png',
      maskIcon: 'img/icons/safari-pinned-tab.svg',
      msTileImage: 'img/icons/mstile-144x144.png',
    },

    // configure the workbox plugin
    workboxPluginMode: "GenerateSW",
    workboxOptions: {
      importWorkboxFrom: "local",
      navigateFallback: "/",

      ignoreUrlParametersMatching: [/help*/],

      // Do not precache images
      exclude: [/\.(?:png|jpg|jpeg|svg)$/],

      // Define runtime caching rules
      runtimeCaching: [
        {
          // Match any request that ends with .png, .jpg, .jpeg or .svg.
          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,

          // Apply a cache-first strategy.
          handler: "CacheFirst",

          options: {
            // Use a custom cache name.
            cacheName: "images",

            // Only cache 10 images.
            expiration: {
              maxEntries: 10
            }
          }
        }
      ]
    }
  }
};

registerServiceWorker.js

/* eslint-disable no-console */

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n' +
          'For more details, visit https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa'
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    }
  });
}

标签： javascriptcachingprogressive-web-appsservice-workervue-cli