我已经在我的 Vue 应用程序中添加了一个 manifest.json 文件。这个文件位于一个名为 scripts 的文件夹中,然后在我的 main.js 上引用该文件夹。但是,它真的什么也没做。例如,我将其设置为将显示设置为独立,将方向固定为纵向,并在用户将其添加到浏览器中的书签时添加标题和书签图标。不幸的是,由于某种原因,它似乎根本不起作用。我哪里做错了?
manifest.json 如下所示
{
"name": "Bake Bread App",
"short_name": "Breadr",
"theme_color": "blue",
"background_color": "blue",
"display": "standalone",
"orientation": "portrait",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "/assets/bookmark-icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/assets/bookmark-icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/assets/bookmark-icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/assets/bookmark-icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/assets/bookmark-icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/assets/bookmark-icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/bookmark-icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/assets/bookmark-icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
然后,如果我们上升一个级别(从这个脚本文件夹之外)并进入main.js,我有
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
// FILTERS
Vue.filter('snippet', function(value) {
return value.slice(0,100);
});
Vue.component('loading-screen', {
template: '<div id="loading">Loading...</div>'
});
import json from './scripts/manifest.json'
export default{
data(){
return{
myJson: json
}
}
}
new Vue({
router,
store,
render: h => h(App),
}).$mount("#app");
此外,我按照 Google 开发者文档的说明.html在索引中添加了<link rel="manifest" href="js/manifest.json">
。
它在 Vue 中不起作用的原因img
src
neds 在 Data object
中定义 require()
webpack 需要了解这些图像。
-
沙盒
-
您可以修改清单并对资源使用 getter 函数。
- 或者,可以在数据对象中
use require("path to the resource (not the manifest string)")
。
helloWorld.vue:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ol v-for="x in myJson.icons" :v-bind="x" :key="x">
<li>
<div> name: {{x.name}}</div>
<div> name: {{x.sizes}}</div>
<div> name: {{x.type}}</div>
<img :src="getSrc(x.src)" alt="wrong..">
</li>
</ol>
</div>
</template>
<script>
import json from "../../manifest.json";
export default {
name: "HelloWorld",
data() {
return {
myJson: json,
msg: "Manifest:"
};
},
methods: {
getSrc(src) {
return require("../assets/" + src);
}
}
};
</script>
修改后的图标 json:
"icons": [
{
"name": "logo",
"src": "logo.png",
"sizes": "99x99",
"type": "image/png"
},
{
"name": "logo2",
"src": "logo.png",
"sizes": "929x929",
"type": "image/png"
}
],