Vue双实例共存时Cookie Banner未编译问题求助

核心排查与修复步骤 #

1. 修复DOM解析错误 #

你的Cookie横幅HTML存在未闭合标签问题：

This website uses cookies. ... in accordance with our Privacy Notice</a>. 

这里的</a>没有对应的起始<a>标签，会导致浏览器DOM解析异常，直接让Vue无法识别内部的v-if、v-on:click等指令。

解决：
删除多余的</a>，或补全完整链接标签：

<!-- 补全链接示例 -->
in accordance with our <a href="/privacy-notice">Privacy Notice</a>.

2. 确保Vue实例在DOM加载完成后初始化 #

如果Cookie横幅的脚本在DOM元素渲染前执行，Vue会找不到#cookie-banner元素，导致实例无法挂载（Vue 2中此场景不会抛出控制台错误），模板自然不会被编译。

解决：
将Cookie实例初始化包裹在DOMContentLoaded事件中：

(function () {
  document.addEventListener('DOMContentLoaded', function() {
    var _instance = new Vue({
      el: "#cookie-banner",
      data: {
        cookieSaved: null
      },
      methods: {
        saveSessionCookie: function () {
          var expiry = (new Date(Date.now() + 600 * 1000)).toUTCString();
          document.cookie = "cookie-banner-closed=true; expires=" + expiry + ";path=/;"
          this.cookieSaved = true;
        }
      },
      mounted: function () {
        console.log("Cookie横幅实例已挂载"); // 添加日志验证挂载状态
        this.cookieSaved = document.cookie.includes('cookie-banner-closed');
      }
    });
  });
})();

3. 验证实例挂载状态 #

• 查看控制台是否输出Cookie横幅实例已挂载日志，无输出则说明Vue找不到目标DOM元素：
  • 检查页面中是否存在多个id="cookie-banner"的元素（ID必须唯一）
  • 查看页面源代码，确认服务器渲染的HTML中#cookie-banner确实存在

4. 检查Vue版本一致性 #

确保两个实例使用同一版本Vue，避免版本差异引发兼容性问题。可在控制台执行console.log(Vue.version)查看当前版本。

额外优化建议 #

建议将多个独立Vue实例改为组件形式，统一挂载到一个根实例下，更符合Vue最佳实践，也能减少实例间潜在冲突：

// 根实例
new Vue({
  el: "#app"
});

// 标签切换组件
Vue.component('multi-track-swiper', {
  data() {
    return {
      tabs: {}
    }
  },
  methods: {
    checkActiveTab(index) {
      return this.tabs.active === index || (this.tabs.active === undefined && index === "0");
    },
    handlerActiveTab(index) {
      this.tabs.active = index;
    }
  },
  template: `<!-- 对应模板内容 -->`
});

// Cookie横幅组件
Vue.component('cookie-banner', {
  data() {
    return {
      cookieSaved: null
    }
  },
  methods: {
    saveSessionCookie() {
      var expiry = (new Date(Date.now() + 600 * 1000)).toUTCString();
      document.cookie = "cookie-banner-closed=true; expires=" + expiry + ";path=/;"
      this.cookieSaved = true;
    }
  },
  mounted() {
    this.cookieSaved = document.cookie.includes('cookie-banner-closed');
  },
  template: `<!-- 对应模板内容 -->`
});

内容的提问来源于stack exchange，提问作者plau1