[Vue 警告]：找不到元素 — 渲染了空容器

Posted 2023-02-23

【中文标题】[Vue 警告]：找不到元素 — 渲染了空容器

【英文标题】：[Vue warn]: Cannot find element — empty container is rendered

【发布时间】：2017-08-20 13:38:04

【问题描述】：

我正在尝试学习 Vue 2 框架，但我遇到了这个错误。我有以下脚本负责我的应用程序的功能：

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import App from './App.vue'
import Posts from './components/Posts.vue'
import Routes from './routes/routes'

Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.use(VueResource)

const router = new VueRouter(
  routes: Routes
)

new Vue(
  el: '#app',
  router: router,
  render: h => h(App)
)

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>

</template>

<script>
  import Posts from './components/Posts.vue'

  export default 
    name: 'app',
    components: 
      Posts
    
  
</script>

<template>
    <div id='root'>
        <h1>Test</h1>   
        <input type="text" v-model="message">
    </div>
</template>

Posts.vue

<script>
    import Vue from 'vue'

    window.addEventListener('load', function () 
        new Vue(
            el: '#root',
            data: 
                message: 'Hello World!'
            
        )
    )
</script>

这些脚本包含在页面末尾。重要的是要提到 id 值为 'app' 的 div 是空的。我也是 webpack 的新手，所以我假设我的导入和导出存在问题，但不幸的是我自己无法解决。索引页面仅包含以下内容：

<div id="app"></div>

UPD (router.js)

import Posts from '../components/Posts.vue'

const routes = [
    path: '/', component: Posts 
]

export default routes 

【问题讨论】：

你有导入语句，你也有一个webpack标签，我不太清楚你为什么需要window.addEventListener('load', ...)

@amresh-venugopal，你对 addEventListener() 函数的看法是完全正确的。我不应该把它包括在问题中。我之前使用它进行测试。但是你能告诉我导入语句有什么问题吗？你说的让我很困惑。

对不起，我只是从导入语句中推断出您正在使用 webpack，因此您不需要使用 addEventListener 部分。导入语句没有错。

另外，我认为帖子模板已添加到app.vue。你也可以分享router.js 文件吗？我无法确定默认路由服务的内容。

@amresh-venugopal，当然。您现在可以在原始帖子中找到它。

【参考方案1】：

在 App.vue 中

<template>
  <div id="app">
   <router-view></router-view>
  </div>
</template>

<router-view> 组件将按照当前路由显示组件。

import Posts from '../components/Posts.vue'

const routes = [
  path: '/', component: Posts 
]

export default routes 

这里很明显<router-view> 将显示Posts 组件。

Posts.vue

<template>
  <div id='root'>
    <h1>Test</h1>   
    <input type="text" v-model="message">
  </div>
</template>

<script>
import Vue from 'vue'

window.addEventListener('load', function () 
    new Vue(
        el: '#root',
        data: 
            message: 'Hello World!'
        
    )
)
</script>

闪回路由器，有一行写着：

import Posts from '../components/Posts.vue'

这是导入的默认语法，但 Posts.vue 导出了什么？因此，路由器没有导入任何内容。因此，#app 内部没有呈现任何内容。

此外，帖子不必是 new Vue(...) 实例。

<template>
  <div id='root'>
    <h1>Test</h1>   
    <input type="text" v-model="message">
  </div>
</template>

<script>
import Vue from 'vue'

export default 
  data: 
    message: 'Hello World!'
  

</script>

会做得很好。这样，路由器就可以使用默认导出。

【讨论】：

就在我阅读您的回复之前，我意识到您指出的不一致之处。无论如何，感谢您的代码演练。它帮助了我。

很高兴它有帮助:)