清单：行：1，列：1，语法错误。将清单的 link 更改为 public

Question

我尝试了在 google 中找到的所有内容，但仍然出现相同的错误。这是在我制作我的 vuejs 项目 PWA 之后发生的。

/public/index.html

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" />
        <link rel="manifest" crossorigin="use-credentials" href="%PUBLIC_URL%/manifest.json" />
    </head>
    <body>
        <noscript>
            <strong
                >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
                enable it to continue.</strong
            >
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

manifest.json

{
    "name": "We do web",
    "short_name": "Wedoweb",
    "description": "Awesome app that will help you achieve your dreams.",
    "theme_color": "#fff",
    "background_color": "#333333",
    "display": "standalone",
    "icons": [
        { "src": "/img/icons/apple-touch-icon-60x60.png", "sizes": "60x60", "type": "image/png" },
        { "src": "/img/icons/apple-touch-icon-120x120.png", "sizes": "120x120", "type": "image/png" },
        { "src": "/img/icons/apple-touch-icon-76x76.png", "sizes": "76x76", "type": "image/png" },
        { "src": "/img/icons/apple-touch-icon-152x152.png", "sizes": "152x152", "type": "image/png" },
        { "src": "/img/icons/apple-touch-icon-180x180.png", "sizes": "180x180", "type": "image/png" },
        { "src": "/img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
        { "src": "/img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
    ]
}

我用软件检查了拼写错误，但没有任何结果。

Answer 1

这是 vue-pwa 插件生成的默认清单文件

{
"name": "client",
"short_name": "client",
"theme_color": "#4DBA87",
"icons": [
    { "src": "./img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "./img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
    {
        "src": "./img/icons/android-chrome-maskable-192x192.png",
        "sizes": "192x192",
        "type": "image/png",
        "purpose": "maskable"
    },
    {
        "src": "./img/icons/android-chrome-maskable-512x512.png",
        "sizes": "512x512",
        "type": "image/png",
        "purpose": "maskable"
    }
],
"start_url": ".",
"display": "standalone",
"background_color": "#000000"

}

你肯定错过了“start_url”：“。”部分，因此请尝试添加它，或替换整个东西并查看它是否有效，然后开始逐步替换为您的自定义设置。

清单：行：1，列：1，语法错误。将清单的 link 更改为 public

Manifest: Line: 1, column: 1, Syntax error. with changed link to public for the manifest

vue.js

progressive-web-apps