Vue 模板或渲染函数尚未定义,我都没有使用?

IT技术 javascript vuejs2 vue-component vue.js
2021-02-25 16:02:16

这是我的主要 javascript 文件:

import Vue from 'vue'

new Vue({
  el: '#app'
});

我的 HTML 文件:

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

    <script src="{{ mix('/js/app.js') }}"></script>
</body>

带有运行时构建的 Vue.js 的 Webpack 配置:

alias: {
    'vue$': 'vue/dist/vue.runtime.common.js'
}

我仍然收到这个众所周知的错误:

[Vue 警告]:无法挂载组件:未定义模板或渲染函数。(在根实例中找到)

为什么当我在安装 Vue 的 #app div 中什至没有任何东西时,我仍然收到渲染/模板错误?它说found in root但是什么也找不到,因为它甚至没有任何内容?

如果这不起作用,我该如何安装?

编辑:

我试过这样似乎有效:

new Vue(App).$mount('#app');

这是有道理的,因为使用该el属性意味着您正在“扫描”任何组件的 dom 元素,并且它没有用,因为运行时构建没有编译器。

仍然抛出一个非常奇怪的错误消息,尤其是当我清空整个#app div 时。

希望有人能证实我的想法。

6个回答

就我而言,我收到错误是因为我从 Laravel Mix 版本 2 升级到了 5。

在 Laravel Mix Version 2 中,你导入 vue 组件如下:

Vue.component(
    'example-component', 
    require('./components/ExampleComponent.vue')
);

在 Laravel Mix 版本 5 中,您必须按如下方式导入组件:

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

这是文档:https : //laravel-mix.com/docs/5.0/upgrade

更好的是,为了提高应用程序的性能,您可以按如下方式延迟加载组件:

Vue.component("ExampleComponent", () => import("./components/ExampleComponent"));
这会起作用,但根据文档,建议选择切换到 EcmaScript 导入。
2021-05-05 16:02:16
或者附加.default到你想要使用的任何东西。
2021-05-06 16:02:16

如果你曾经像这样调用一个组件:

Vue.component('dashboard', require('./components/Dashboard.vue'));

我想当您更新到 laravel mix 5.0 或其他库时会出现该问题,因此您必须放置 .default。如下所示:

Vue.component('dashboard', require('./components/Dashboard.vue').default);

我解决了同样的问题。

解决了我的问题。谢谢
2021-04-19 16:02:16
那解决了我的问题!谢谢!
2021-05-07 16:02:16

您收到该错误的原因是您使用的运行时构建不支持 HTML 文件中的模板,如此处所示vuejs.org

从本质上讲,vue 加载的文件发生的事情是它们的模板在编译时转换为渲染函数,而您的基本函数试图从您的 html 元素编译。

@Stephan-v 那是一个单独的问题,我发布的内容是关于将 vue 实例安装到 dom 元素上。如果使用该el属性,则需要具有渲染函数或模板编译器,以便它可以解析 html 并构建内部渲染结构。如果您没有其中之一,它将出错,因为它无法编译实例。
2021-04-22 16:02:16
我的 vue 文件甚至没有模板。那是我的问题。
2021-04-26 16:02:16
我该怎么做才能解决这个问题
2021-05-06 16:02:16
此问题可能由许多不同的问题引起,请参见此处
2021-05-11 16:02:16

就我而言,我将组件(在路由器中)导入为:

import bsw from 'common-mod/src/components/webcommon/webcommon'

如果我把它改成这样就简单解决了

import bsw from 'common-mod/src/components/webcommon/webcommon.vue'
花了很多时间弄明白这一点。Vue 中的错误消息有多不准确。该死。
2021-04-19 16:02:16
它也对我有用。有人可以解释两种进口之间的区别吗?
2021-04-22 16:02:16
对我来说,这是正确的答案。在导入过程中不要忘记 .vue 扩展名!
2021-05-03 16:02:16
男人非常感谢!半天前我坚持这个 sh.t,我也忘了把 .vue 放在我的一个组件导入中......
2021-05-05 16:02:16
我猜这与更新的 webpack module导入规则有关。这样,它就识别出它是一个vue文件并正确挂载。
2021-05-16 16:02:16

如果其他人不断收到同样的错误。只需在您的组件模板中添加一个额外的 div。

正如文档所说:

组件模板应该只包含一个根元素

检查这个简单的例子:

 import yourComponent from '{path to component}'
    export default {
        components: {
            yourComponent
        },
}

 // Child component
 <template>
     <div> This is the one! </div>
 </template>