Vue.js 2中通过Webpack与环境变量生成PWA manifest.json问题

我明白你遇到的问题了——想用环境变量动态设置PWA manifest的主题色，但修改pwa插件配置后没生效，对吧？这是因为你没找对PWA插件配置里对应manifest字段的正确位置，下面给你两种可行的解决方法：

方法一：直接在vue.config.js的pwa配置项中设置 #

这是最直观的方式，Vue CLI的PWA插件支持通过manifestOptions来配置manifest的各项参数，它会自动和public文件夹里的manifest.json内容合并（配置项会覆盖文件里的同名字段）。

首先确保你的.env文件里的变量以VUE_APP_开头（Vue CLI只会注入这类变量）：

VUE_APP_THEME_COLOR=#2196F3

然后在vue.config.js里添加如下配置：

module.exports = {
  pwa: {
    manifestOptions: {
      // 直接引用环境变量设置主题色
      theme_color: process.env.VUE_APP_THEME_COLOR
    },
    // 可选：如果想完全忽略public里的manifest.json，直接用配置生成，打开下面这行
    // usePublicManifest: false
  }
}

方法二：通过chainWebpack修改PWA插件参数 #

如果你坚持要用chainWebpack的方式，需要注意PWA插件的参数结构：主题色是嵌套在manifestOptions对象下的，而不是顶层参数。你之前的代码直接修改了args[0].theme_color，这并没有作用到manifest的配置上，正确的写法应该是：

module.exports = {
  chainWebpack: (config) => {
    config.plugin("pwa").tap((args) => {
      // 先确保manifestOptions对象存在
      if (!args[0].manifestOptions) {
        args[0].manifestOptions = {};
      }
      // 给manifestOptions设置主题色
      args[0].manifestOptions.theme_color = process.env.VUE_APP_THEME_COLOR;
      return args;
    });
  }
}

为什么原来的配置无效？ #

Vue CLI的PWA插件（基于workbox-webpack-plugin）的参数结构中，所有和manifest相关的配置都放在manifestOptions字段下。你之前直接修改args[0].theme_color，相当于给插件添加了一个不存在的顶层参数，自然不会影响到最终生成的manifest.json。

配置完成后，运行npm run build，去dist目录下查看生成的manifest.json，就能看到theme_color已经变成你环境变量里设置的值啦。

内容的提问来源于stack exchange，提问作者John