时间戳

首页 > 解决方案 > Vue Cli 404 on wwwroot/index.html 使用 PWA 出错

vue.js - Vue Cli 404 on wwwroot/index.html 使用 PWA 出错

问题描述

我刚刚将一个应用程序移到了 vue cli，但我在让 PWA 工作时遇到了问题。当它试图加载它时出现控制台错误

未捕获（承诺）坏预缓存响应：坏预缓存响应 :: [{"url":"/wwwroot/index.html? WB_REVISION =xxxxxxx","status":404}]

事情是我不确定这个错误来自哪里。实际的父亲加载正常，所有断言都正常，但是 PWA index.html 似乎是从错误的地方加载的。它在 /index.html 而不是 /wwwrooot/html。我不确定为什么它试图从这里加载。这就是 vue.config 的样子

pwa: {
    name: 'app Portal',
    themeColor: '#CC0001',
    msTileColor: '#CC0001',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    workboxOptions: {
        exclude: /\.cshtml$/,
        /*
            docs: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#skip_the_waiting_phase
            a new service worker does not serve pages until the old one releases control
            this is called the waiting phase

            skipWaiting means the new one immediately takes control. this may cause issues with people still using your application
        */
        skipWaiting: true,
    },
},

``

为什么 PWA 似乎从错误的位置加载 index.html 有什么想法吗？

标签： vue.jsprogressive-web-appsvue-cli-3

解决方案

我使用 pwa webpack 配置navigatefallback来解决此问题，请参阅：https ://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#generateSW-navigateFallback

在 vue 路由器上启用历史模式时 pwa 也可能会失败：

这里有一些问题，我认为会让你朝着正确的方向前进：

路由器处于历史模式时不加载 PWA（基于 Vue CLI 3 的项目）

和

Vue 路由器历史记录模式和离线模式下的 PWA

推荐阅读