清单：行：1，列：1，语法错误答案

【问题标题】：Manifest: Line: 1, column: 1, Syntax error清单：行：1，列：1，语法错误
【发布时间】：2020-03-22 22:06:13
【问题描述】：

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

我正在使用 Vuejs 创建 PWA 作为学校项目，每当我使用 Azure 托管网站时，都会发生这种情况，我在 localhost 上没有问题... 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
}

我尝试过这样的名称和短名称属性：“messageboarducn”
我还尝试将 starturl 编辑为托管 url：“https://serviceworkerspike.azurewebsites.net/”和“/”
我也尝试过将 manifest.json 文件移动到根目录和 /src 目录中，但其他指南告诉我它应该与 index.html 位于同一文件夹中，并且 /public 是默认的

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>

如何改正错误？

【问题讨论】：

欢迎来到 Stack Overflow！提问时请阅读为什么不在 SO 上上传代码和/或错误图片Discourage screenshots of code and/or errors。

标签： json azure vue.js azure-web-app-service manifest

【解决方案1】：

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

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

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

"start_url": "/"

当您以根为起点时。

否则，如果您要使用特定的基本 url 为您的应用程序提供服务，您应该在 startUrl 属性中反映它：

Example: 

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

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

Or simply:
    "start_url": "./"   <-- This would match any base-href != "/"

然后您应该将您的网络服务器设置为自动提供 index.html 文件（这通常默认启用）

【讨论】：

我仍然遇到同样的错误，但我的 index.html 和清单不在根目录中，它位于 /public 文件夹中，因为这就是 Vue 设置它的方式。我在问题中链接了我的文件结构的照片

【解决方案2】：

我遇到了完全相同的问题（在 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 配置。

【讨论】：

我在使用节点 js、引导程序和 tomcat 服务器时也面临同样的错误。我创建了与上面相同的 web.config 文件，但没有运气。还有其他原因吗？
@kodali 你确定你正在运行 IIS 吗？
是的。我在 IIS 服务器上运行。
@kodali 你得到完全相同的错误吗？而不是在本地主机上？
是的，它在本地主机上工作正常，但在 IIS 服务器上却不行。

【解决方案3】：

对我来说，修复起来非常简单，只需在 index.html 中组织代码，以下链接标签必须位于从网站图标生成器复制的少数几个标签之上，就在元标签下方

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

【讨论】：

使用 React 和 create-react-app，解决了这个问题！

【解决方案4】：

我必须配置两件事：

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

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

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

【讨论】：

【解决方案5】：

检查清单文件格式。当我有 UNIX / Unicode UTF-8 没有 BOM 时，我收到了这个错误。更改为 DOS / Unicode UTF-8 no BOM 后，错误消失了。可以在任何高级代码编辑器中检查和更改文件格式。我不知道到底是什么问题，可能取决于您的托管公司。我在 hexa 编辑器中比较了文件，它们在视觉上似乎是相同的。

【讨论】：

【解决方案6】：

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

【讨论】：

我必须使用 ./ 作为我的 href 值，例如 index.html 中的 <base href="./"> 并在 ngsw-config.json 中设置 "index": "/route/from/domain/index.html" 以便我的工作。 "start_url": "./" 也一样