Vue.JS Genera manifest.json con variables .env

Question

Estoy usando Vue.JS 2 y estoy buscando algo para generar el manifest.jsonpara PWA con paquetes web y variables de entorno. Por ejemplo, pondré el color primario en my .env, y luego puedo establecer "theme_color": VUE_APP_THEME_COLORen my manifest.json.

Traté de hacerlo de esta manera en el vue.config.js:

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

Pero no tiene ningún efecto sobre el manifiesto. No anula el manifiesto en la public/carpeta.

Answer 1

Configure de la pwa.themeColorsiguiente manera:

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

Además, dado que está utilizando public/manifest.json, que tiene prioridad sobre la pwaconfiguración, asegúrese de eliminar theme_colorde ese archivo:

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

Demostración de GitHub