Change properties in manifest.json file on build

Question

I have a website with 2 domains like Page1.com and Page2.com. In my manifest.json file i have set the name to Page 1, but when the website is build and published to Page1.com and to Page2.com i want to change the name to be the same as the domain name. But how can i do this in my build step? Today i se Page 1 when i visit Page2.com.

I have tried to change the meta, application-name in my code to get the correct name, but this don't work.

My vue.config

const manifestJSON = require('./public/manifest.json')


module.exports = {
pluginOptions: {
i18n: {
  locale: 'en',
  fallbackLocale: 'en',
  localeDir: 'locales',
  enableInSFC: true
}
},

runtimeCompiler: true,

pwa: {
themeColor: manifestJSON.theme_color,
name: manifestJSON.short_name,
msTileColor: manifestJSON.background_color,
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',

workboxPluginMode: 'InjectManifest',
workboxOptions: {
  swSrc: 'service-worker.js',
  exclude: [
    /_redirects$/
  ]
}
}

}

This site is build with VueJs and use Netlify as host.

Answer 1

So the manifest file is generated by vue-cli every time you build your app. So you shouldn't be using it to seed the vue-config file.

The one file that you could use the way you have shown here would be your package.json file - but it won't hold the values you are looking for.

Your Vue.config file is where you would enter, manually, the pwa info like theme and background color, etc.

To get back to your initial question, you could create two separate build scripts in your package.json, one for page1 and one for page2, and use environment variables to specify the name you ant to use:

"scripts": {
    "page1": "env SITE_NAME='Page 1' npm run prod",
    "page2": "env SITE_NAME='Page 2' npm run prod",
    ...
}

Then in your vue.config file, you can use the variable to build your pwa object:

pwa: {
    name: process.env.SITE_NAME,
    ...
}

Finally, you can build your apps by calling

npm run page1

Be careful though: every build will overwrite your public folder! Depending on your context, how/when you build each app, you may have to take additional steps to generate two separate output folders.