Vue.JS 使用 .env 变量生成 manifest.json

Question

我正在使用 Vue.JS 2，我正在寻找一些东西来为带有 webpack 和环境变量的 PWA 生成 manifest.json。例如，我将原色放在我的.env 中，然后我可以在我的manifest.json 中设置"theme_color": VUE_APP_THEME_COLOR。

我尝试在vue.config.js中这样做：

module.exports = {
  chainWebpack: (config) => {
    config.plugin("pwa").tap((args) => {
      args[0].theme_color = VUE_APP_THEME_COLOR;
      return args;
    });

但它对清单没有影响。它不会覆盖 public/ 文件夹中的清单。

Answer 1

配置pwa.themeColor如下：

// vue.config.js
module.exports = {
  pwa: {
    themeColor: process.env.VUE_APP_THEME_COLOR,
  }
}

另外，由于您使用的是public/manifest.json，它优先于pwa 配置，请确保从该文件中删除theme_color：

// public/manifest.json
{
  "theme_color": #eee, // ❌REMOVE THIS
}

GitHub demo