在构建时更改manifest.json文件中的属性

问题描述

我有一个拥有2个域的网站，例如Page1.com和Page2.com。在我的manifest.json文件中，我将名称设置为Page 1，但是在构建网站并将其发布到Page1.com和Page2.com时，我想将名称更改为与域名相同。但是我该如何在构建步骤中做到这一点？今天，当我访问Page2.com时，它就是Page 1。

我试图更改代码中的Meta和application-name以获得正确的名称，但这不起作用。

我的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$/
  ]
}
}

}

此网站是使用VueJ构建的，并使用Netlify作为主机。

解决方法

因此，清单文件是在每次构建应用程序时由vue-cli生成的。因此，您不应使用它来播种vue-config文件。

您可以使用此处显示的方式使用的一个文件就是package.json文件-但它不会保存您要查找的值。

您的Vue.config文件是您手动输入主题和背景颜色等pwa信息的地方。

回到最初的问题，您可以在package.json中创建两个单独的构建脚本，一个用于page1，一个用于page2，并使用环境变量指定您要使用的名称：

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

然后在vue.config文件中，您可以使用该变量来构建pwa对象：

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

最后，您可以通过调用来构建应用

npm run page1

但是请小心：每个构建都将覆盖您的公用文件夹！根据您的情况，如何/在构建每个应用程序时，您可能必须采取其他步骤来生成两个单独的输出文件夹。

最简单的方法是使用 process.argv 获取命令行参数。

例如如果你运行文件的命令是：

node file.js

然后使用：

node file.js env_variable_str

会有process.argv[process.argv.length - 1] === "env_variable_str"

在我的情况下，清单不仅要更改值，还要根据参数添加/删除键。所以我制作了一个模板 (manifest_template.json) 并使用“构建助手”根据我在 public/ 文件夹中的参数创建正确的清单。然后我用 npm run build 链接了这个命令，并使用了另一个链接命令来创建 zip 文件夹。

我的工作流程：create manifest.json in public -> npm run build -> make zip with correct name

如果您想查看代码，请告诉我！

manifest netlify vue.js webpack webpack webpack