在 index.html 中使用 vue js 变量答案

【问题标题】：use vue js variables in index.html在 index.html 中使用 vue js 变量
【发布时间】：2021-03-08 01:51:24
【问题描述】：

我需要在 index.html 页面中使用 vue js 变量。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 <link rel="shortcut icon" :href="$store.state.siteLogo" type="image/x-icon" />
 <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css" />
 <link rel="stylesheet" type="text/css" href="static/layui/common.css" />
 <title id="siteTitle">{{$store.state.siteTitle}}</title>
 </head>
 <body>
 <div id="app"></div>
 </body>
</html>

在那里，对于标题，我需要从服务中获取一个值。该值能够从服务中获取并将其分配给 store js 变量。我的尝试如上所示，因为它是一个 html 文件，所以它不起作用。任何人，知道我怎样才能做到这一点？它是这样工作的。如果我们将 document.title 设置如下，则在 App.vue 内部创建方法。

created() {
 document.title = this.$store.state.siteTitle;
}

但现在我需要知道如何从服务中更改快捷方式图标。有人知道吗？

【问题讨论】：

这可能会回答你stackoverflow.com/questions/36612847/…
vue-meta.nuxtjs.org

标签： vue.js

【解决方案1】：

你可以做到这一点。您可以从您的服务或您的 vuex 状态动态更改 favicon。但是，如果您不想使用这些 vanilajs 东西，那么vue-meta.nuxtjs.org 适合您。

created () {
    var link =
      document.querySelector("link[rel*='icon']") ||
      document.createElement("link");
    link.type = "image/x-icon";
    link.rel = "shortcut icon";
    link.href =
      "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196";
    document.getElementsByTagName("head")[0].appendChild(link);
}

或者您可以将它放入一个方法中，以便在观看或点击事件期间动态使用它。

created() {
    this.initIcon();
  },
  methods: {
    initIcon() {
      var link =
        document.querySelector("link[rel*='icon']") ||
        document.createElement("link");
      link.type = "image/x-icon";
      link.rel = "shortcut icon";
      link.href = this.icon;
      document.getElementsByTagName("head")[0].appendChild(link);
    },
    click() {
      this.icon = '' // new updated icon here
      this.initIcon();
    },
  },

【讨论】：