Manifest.json react js 中第 1 行错误

Question

我对这件事很沮丧。我试图在 Heroku 上托管我的 mern 应用程序，所以我试图检查服务器（后端）是否正常工作。然后，我遇到了问题

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

我研究了很多网站，尝试了很多解决方案，但找不到一个。

我的 manifest.json 文件如下所示：

{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
  {
    "src": "favicon.ico",
    "sizes": "64x64 32x32 24x24 16x16",
    "type": "image/x-icon"
  },
  {
    "type": "image/png",
    "sizes": "192x192"
  },
  {
    "type": "image/png",
    "sizes": "512x512"
  }
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

我的 index.html 是这样的：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="/logo/favicon.ico" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hubballi&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap" rel="stylesheet">
  <meta name="description" content="Web site created for housedeck-home-services" />
  <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
  <link rel="manifest" href="manifest.json" />
  <title>Home Services by HouseDeck</title>
</head>
<body>
  <div id="app"></div>
</body>
<script>
</script>
</html>

我已经尝试过的是：

编辑 manifest.json 中的 start_url 为
- start_url:".",
- start_url:"/",
- start_url:"./",
- start_url:"*",
- start_url:"./index.html",
将 index.html 中的名称正确链接为
- link rel="清单" href="manifest.json" />
- link rel="清单" href="/manifest.json" />
- link rel="清单" href="./manifest.json" />
- link rel="清单" href="manifest.webmanifest" />
- link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
将 React 应用程序的 package.json 编辑为
- 主页：".",
- 主页："/",
- 主页："./",
- 主页："https://localhost:5000/",
- 主页："",
- 主页：" ",
- 代理："https://locahost:1000/",

但似乎对我没有任何作用。我已经在我的浏览器中启用了 javascript 并在 react@16 中使用 webpack。上次它自动运行时我使用了但是今天我再次尝试时，它似乎不起作用。请帮助我，我对此感到非常沮丧。我也无法获得我 link 编辑到 index.html 的图标。 本地主机为 304，favicon.ico 和 manifest.json。

我认为问题出在构建或 public 文件夹中，但我也尝试了 localhost 和 firebase 托管，它们工作正常，但只有当我 link 客户端使用用于尝试托管的服务器。

这是我的 index.js

app.get("*", (req, res) => {
     res.sendFile(path.join(__dirname ,'/FRONTEND/public/index.html'));
})

帮我解决这些问题。我想我会永远被困在这里。

Answer 1

由于没有人回答这个问题，我自己找到了答案。

答案很简单仔细阅读删除步骤

public/index.html中的%PUBLIC_URL%不需要去掉但如果你想要他们就做 link rel="manifest" href="/manifest.json"
在 index.js 中的 server-side 添加这个

app.use(express.static(path.join(__dirname,'client','build'))

此行指定如果您的浏览器要搜索与网站相关的任何文件，它将在该目录中搜索 (your_server/client/build)。在这里它将找到删除 Manifest: Line: 1, column: 1, Syntax error.

的 manifest.json

然后在index.js中添加这个

app.get("/*", (req, res) => { res.sendFile(path.join(__dirname ,'/前端/public/index.html')); })

这一行的意思是 - 当在您的网站文件中搜索任何 URL 时，它总是会将您重定向到 index.html

manifest.json 中无需更改任何内容。但是，如果您删除了反应模板提供的徽标，那么您也必须删除 manifest.json 中的那些行。另外，我想声明 manifest.json 和 manifest.webmanifest 两者的工作原理相同。

以上所有步骤都删除了错误，删除manifest.json的linking将不起作用您可以在这些帖子中阅读相关内容：-

post tells you about the manifest. json

tells you about the deployment steps

所有这些都对我有用我花了一个星期的时间来找到解决方案。

Manifest.json react js 中第 1 行错误

Manifest.json error in line 1 in react js

javascript

reactjs

json

web-hosting