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

Question

我有一个包含 2 个域的网站，例如 Page1.com 和 Page2.com。在我的 manifest.json 文件中，我将名称设置为第 1 页，但是当网站构建并发布到 Page1.com 和 Page2.com 时，我想将名称更改为与域名。但是我怎么能在我的构建步骤中做到这一点呢？今天我在访问 Page2.com.

时看到了第 1 页

我曾尝试更改代码中的元应用程序名称以获得正确的名称，但这不起作用。

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

}

这个站点是用 VueJs 构建的，使用 Netlify 作为主机。

Answer 1

因此清单文件由 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

不过要小心：每次构建都会覆盖您的 public 文件夹！根据您的上下文，how/when 您构建每个应用程序，您可能需要采取额外的步骤来生成两个单独的输出文件夹。

Answer 2

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

例如，如果您命令运行，则文件为：

node file.js

然后使用：

node file.js env_variable_str

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

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

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

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

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

Change properties in manifest.json file on build

vue.js

webpack

manifest

netlify