无法找到manifest选项，如何找到该选项以添加manifest文件？

阿华AIGC实验室

2026-5-22

找不到Manifest选项？这样添加Manifest文件就行

别着急，找不到专门的「添加Manifest」选项太正常了——很多IDE、开发工具甚至框架都没有单独的这个入口，咱们直接手动创建或者在常用场景里找替代方法就行，分几种情况给你拆解：

最通用：手动创建Manifest文件

这是最稳妥的方法，完全不用依赖任何工具的选项：

在项目根目录（或者静态资源目录，比如public文件夹）新建一个文件，命名为manifest.json
在项目的主HTML文件（比如index.html）的<head>标签里添加引用：
```
<link rel="manifest" href="/manifest.json">
```

给manifest.json填充基础内容（可以根据自己的需求修改）：

{
  "name": "你的应用全称",
  "short_name": "应用短名",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196F3",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

针对常用开发工具的操作

VS Code

VS Code本身没有内置的「添加Manifest」选项，直接右键项目根目录 → 「新建文件」→ 命名为manifest.json即可。如果想要快速生成模板，可以安装Manifest Generator插件，打开命令面板（Ctrl+Shift+P）输入Generate Web Manifest，就能自动生成带提示的基础结构。

Chrome DevTools（调试PWA时）

如果你是在DevTools里找Manifest的查看入口：

打开DevTools → 切换到Application标签页 → 左侧菜单里就能看到Manifest选项
如果显示「No Manifest Detected」，说明你还没在HTML里引用Manifest文件，按照上面的手动方法添加后刷新页面，就能看到Manifest的详细信息了。

前端框架场景（React/Vue/Vite）

Create React App：默认在public文件夹里已经自带了manifest.json，如果不小心删掉了，直接在public里新建一个就行，public/index.html里已经自动添加了引用，不用额外修改。
Vue CLI/Vite：默认没有Manifest文件，你可以在public文件夹新建manifest.json，然后在public/index.html的<head>里手动添加<link rel="manifest" href="/manifest.json">即可。