#vue.js #progressive-web-apps
#vue.js #progressive-веб-приложения
Вопрос:
Я перепробовал все, что нашел в 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" }
]
}
Я проверил программное обеспечение на наличие опечаток, но ничего не появилось.
Комментарии:
1. Можете ли вы открыть manifest.json в блокноте? или notepad многие редакторы помещают двоичную информацию в файл (часто начало столбца IE 1), что делает его больше не текстовым файлом ascii
2. в notepad все выглядит хорошо
3. попробуйте перейти по URL-адресу в браузере с открытыми инструментами проверки. Затем посмотрите на вкладку сеть> вкладка заголовок. Что такое content-type: ? application / json — это то, что мы хотим видеть, хотя используются и другие типы. Также посмотрите предварительный просмотр, чтобы убедиться, что то, что доставляет сервер, правильно.
4. И какой браузер вы используете?
5. Я только что удалил URL-адрес из индексного html, и сейчас все работает хорошо
Ответ №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»: «.», Поэтому попробуйте добавить ее или заменить всю вещь и посмотреть, работает ли она, затем начните заменять свои пользовательские настройки шаг за шагом.