如何解决在构建时更改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
如果您想查看代码,请告诉我!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。