Vue CLI 3 项目中 Manifest.json（PWA）生成失败？解决之道在此！

在 Vue CLI 3 项目中解决无法生成 Manifest.json（PWA）的问题

作为一名程序员和技术作家，我遇到过很多开发者遇到的一个常见问题：在 Vue CLI 3 项目中无法生成 Manifest.json 文件。如果你也遇到了这个问题，不用担心，我将提供详细的分步指南来解决它。

问题概述

在 Vue CLI 3 项目中，当你安装并配置 @vue/cli-plugin-pwa 插件后，你会希望在构建过程中自动生成一个 manifest.json 文件。这个文件对于渐进式 Web 应用程序 (PWA) 非常重要，因为它包含应用程序的元数据和图标。然而，有时你可能会遇到构建过程中无法生成 manifest.json 的问题。

解决方法

要解决此问题，请按照以下步骤操作：

1. 确保已正确安装插件

使用以下命令安装 @vue/cli-plugin-pwa：

vue add @vue/cli-plugin-pwa

2. 在 vue.config.js 中配置插件

在 vue.config.js 文件中，将以下配置添加到 pwa 选项中：

module.exports = {
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // ... 其他工作箱选项
    },
    manifestOptions: {
      // ... 自定义清单选项
    },
  },
};

3. 运行构建命令

使用以下命令运行构建：

vue-cli-service build --modern

4. 检查输出目录

构建完成后，manifest.json 文件应生成在 dist 输出目录中。

5. 进一步排查

如果仍然无法生成 manifest.json，请尝试以下操作：

• 检查 vue.config.js 配置是否正确。
• 确保在构建命令中使用了 --modern 标志。
• 尝试删除 node_modules 目录并重新安装依赖项。
• 检查控制台是否有任何错误消息。

提示

• workboxPluginMode 选项应设置为 InjectManifest，以将清单注入服务工作者。
• manifestOptions 选项可用于自定义清单文件的内容。
• 有关更多信息，请参阅 Vue CLI PWA 插件文档。

常见问题解答

1. 为什么 manifest.json 文件很重要？

manifest.json 文件包含有关 PWA 的重要信息，例如名称、图标、启动 URL 和离线支持信息。浏览器使用此文件来确定如何显示和运行你的 PWA。

2. workboxPluginMode 和 workboxOptions 选项是什么？

workboxPluginMode 选项指定如何将清单文件注入服务工作者。workboxOptions 选项允许你自定义服务工作者的行为。

3. manifestOptions 选项有什么作用？

manifestOptions 选项允许你自定义清单文件的内容。你可以设置应用程序名称、图标和其他元数据。

4. 为什么我仍然无法生成 manifest.json 文件？

确保已正确安装插件并正确配置了 vue.config.js 文件。还请确保使用 --modern 标志运行构建命令。

5. 在哪里可以获得有关 PWA 的更多信息？

你可以参考 Vue CLI PWA 插件文档 或 Web.dev 上的 PWA 指南。