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

Question

这是托管的 url：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
}

我试过这样设置名称和短名称属性：“messageboarducn”
我也尝试将开始url编辑为托管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>

如何改正错误？

Answer 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 != "/"

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

Answer 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 配置。

Answer 3

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

Answer 4

对我来说修复起来非常简单，只是在 index.html 中组织代码的问题，下面的 link 标签必须位于从 favicon 生成器复制的几个标签之上，就在元标签下面

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

Answer 5

我必须配置两件事：

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

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

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

Answer 6

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

Answer 7

我知道您正在使用 Azure 云，但我曾经在使用 AWS Amplify 时遇到过同样的问题，这里是我解决它的步骤。

转到您的 Amplify console
Select 显示问题的应用程序。
在左侧面板 select 中标题为 重写和重定向 .
的选项
您会在那里找到您的应用程序的重定向规则。请select选项编辑。
查找具有此结构的行

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>.

在 json 之后添加扩展名 webmanifest。代码看起来像

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|webmanifest)$)([^.]+$)/>.

按保存并再次检查站点。

如果您的项目使用 Apache，则编辑文件 .htacces 并在部分中包含 webmanifest 扩展名：

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js|webmanifest)$">
    Header set Access-Control-Allow-Origin "https://your-url"
  </FilesMatch>
</IfModule>

我想这个配置有助于避免不需要的和恶意的扩展。

Answer 8

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />从 index.html 头文件中删除这一行或者在 public 目录

中创建 manifest.json 文件

Answer 9

我通过将 json mimetype 添加到 webconfig 来修复我的错误。 asp.net 代码不允许默认提供 mimeType json。

<system.webServer>
     <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
 </system.webServer>

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

Manifest: Line: 1, column: 1, Syntax error

json

manifest

azure

vue.js

azure-web-app-service