Question

我在repo下的同一个库中有两个演示，demo。

主要区别在于，一个用于browser，另一个用于node。

但是browser会有错误

index.js:1 Uncaught SyntaxError: Identifier 'HeaderComp' has already been declared

主要原因是什么？

更新：

请记住，我不会两次声明变量！我还尝试在顶部添加控制台日志以确保脚本执行一次！


var HeaderComp = {
  name: 'HeaderComp',
  template: `
  Back
  {{ r.title }}
`,
  mixins: [VueTopDown.VueTopDownItem],
  computed: {
    routes () {
      return [
        { href: '/page', title: 'Page' },
        { href: '/hello-vue', title: 'HelloVue' }
      ]
    }
  }
}

var FooterComp = {
  name: 'FooterComp',
  template: `{{ vueFooter }}`,
  mixins: [VueTopDown.VueTopDownItem],
  data () {
    return {
      vueFooter: 'This is Vue Footer'
    }
  }
}

var ContentComp = {
  name: 'ContentComp',
  template: ``,
  mixins: [VueTopDown.VueTopDownItem],
  computed: {
    innerHTML () {
      var root = document.createElement('div')
      root.innerHTML = this[VTDConstants.OUTER_HTML]
      return root.querySelector('*').innerHTML
    }
  }
}

var HelloVue = {
  template: `Hello Vue`,
  props: ['clazz'],
  inheritAttrs: false
}

var Page = {
  template: ``,
  props: ['clazz', 'innerHTML'],
  inheritAttrs: false
}

var router = new VueRouter([
  { path: '/hello-vue', component: HelloVue },
  { path: '/page', component: Page },
  { path: '*', redirect: '/page' }
])

var inst = new Vue({
  router,
  mixins: [VueTopDown.VueTopDown],
  components: {
    HeaderComp: HeaderComp,
    FooterComp,
    ContentComp
  },
  data () {
    return {
      [VueTopDown.VTDConstants]: {
        'header': HeaderComp,
        'footer': FooterComp,
        '.content': ContentComp
      }
    }
  }
})

inst.$mount('#app')

另请注意，类似的代码在node环境中正常运行，但在browser中失败！
如果注释掉inst.$mount('#app')

期望

browser的预期行为应与node的预期行为相同。

vue.js Uncaught SyntaxError：已经声明了标识符

0 个答案: