Question

这是托管网址：https://serviceworkerspike.azurewebsites.net/

我正在使用Vuejs创建PWA作为学校项目，每当我使用Azure托管网站时，都会发生这种情况，我在本地主机上就没有问题了... Chrome devtools对此回应：

/manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
manifest.json:1 GET https://serviceworkerspike.azurewebsites.net/manifest.json 404
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

我在index.html中添加了它：

<link rel="manifest" href="/manifest.json">

这是我的manifest.json文件：

{
  "name": "MessageBoardUCN",
  "short_name": "MessageBoardUCN",
  "theme_color": "#ff095a",
  "background_color": "#feaaee",
  "display": "standalone",
  "start_url": "/index.html",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

我试图做如下的name和shortname属性：“ messageboarducn”
我还尝试将起始网址编辑为托管网址：“ https://serviceworkerspike.azurewebsites.net/”和“ /”
我也尝试过将manifest.json文件移到根目录和/ src目录中，但是其他指南告诉我，它应该与index.html位于同一文件夹中，并且/ public是默认的< / p>

This is my file structure

通常您没有Vuejs的web.config文件，但我什至尝试添加一个如下所示的文件：

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
    </staticContent>
  </system.webServer>
</configuration>

我该如何纠正错误？

Answer 1

对我来说，修复是如此简单，只需在index.html中组织代码即可，以下链接标记必须位于从favicon生成器复制的少数链接标记的上方，而在元标记之下>

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Answer 2

如果清单文件位于根级别（即index.html所在的位置），则可以在index.html文件的<head>标记中以如下方式引用它：

<link rel="manifest" crossorigin="use-credentials" href="manifest.json"/>

加上清单文件中的startUrl应该是：

"start_url": "/"

，因为您将根定为起点。否则，如果您要为应用提供特定的基本网址，则应将其反映在startUrl属性中：

Example: 

-->  www.myapp.com/my-other-url-part/

Use: "start_url": "/my-other-url-part"

然后，应将Web服务器设置为自动提供index.html文件（通常默认情况下启用此功能）。

Answer 3

我遇到了完全相同的问题（在Azure Windows Web服务上）。我刚刚在根文件夹中创建了一个新的web.config，其中包含以下内容（或编辑现有内容，如果有的话）：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

这将为json文件添加mime配置。

Answer 4

我必须配置两件事：

%PUBLIC_URL% 在 index.html 清单的 href 中：

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
将 package.json 中的 homepage 配置到您的应用程序所在的目录：

"homepage": "https://example.com/myapp",

Answer 5

检查您的基地应该像这样<base href=""/>

清单：第1行，第1列，语法错误

5 个答案: