Vue Cli 3 项目不会生成manifest.json (PWA)

Question

我有一个 Vue Cli 3 项目，安装并配置了

@vue/cli-plugin-pwa

插件（在

vue.config.js

中），但是当我运行

vue-cli-service build --modern

时，没有根据我的配置生成

manifest.json

。

我期望看到一个

manifest.json

，它至少包含我指定的图标的路径。也许还有我放入

vue.config.js

中的设置。

我是否做错了什么，或者我对插件应如何工作的期望与实际行为不符？

我该如何让 Vue 生成我的

manifest.json

？

Answer 1

我也有同样的问题。我运行了生产版本：

yarn build

或

npm build

，并在

manifest.json

文件夹中找到了

dist

文件。

Answer 2

尝试在public文件下手动添加manifest.json，也可以将dist文件夹下npm build后生成的manifest.json复制到public文件中，然后根据需要进行编辑。另请检查您的浏览器是否正在检测manifest.json。

Answer 3

manifest.json

是每次构建项目时生成的，不应直接修改或添加到

public

目录中。

相反，为了更新

manifest.json

，您应该修改

vue.config.js

并在

pwa

键下添加相关数据。

// vue.config.js
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pwa: {
    name: 'My nice pwa app',
    short_name: 'Nice',
    theme_color: "#4DBA87",
    icons: [
      {
        src: "./img/icons/android-chrome-192x192.png",
        sizes: "192x192",
        type: "image/png"
      }
      // etc ...
    ]
    // etc ...
  }
})

来源：https://cli.vuejs.org/core-plugins/pwa.html#configuration