为VueJS应用程序实现manifest.json文件以设置条件

Question

我已将manifest.json文件添加到我的Vue应用程序中。该文件位于一个名为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 Developers Documentation的说明在index.html中添加了<link rel="manifest" href="js/manifest.json">。

Answer 1

它不在Vue qazxsw poi qazxsw poi中工作的原因需要在img中用src定义

和webpack需要知道图像。

• Data object
• 您可以修改清单并为资源使用getter函数。
• 或者你可以在数据对象中使用require()。

---

helloWorld.vue：

sandbox

---

修改后的图标json：

use require("path to the resource (not the manifest string)")