Javascript Vue 模板或渲染函数尚未定义，我都没有使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41983767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue template or render function not defined yet I am using neither?
提问by Stephan-v
This is my main javascript file:
这是我的主要 javascript 文件：
import Vue from 'vue'
new Vue({
el: '#app'
});
My HTML file:
我的 HTML 文件：
<body>
<div id="app"></div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
Webpack configuration of Vue.js with the runtime build:
带有运行时构建的 Vue.js 的 Webpack 配置：
alias: {
'vue$': 'vue/dist/vue.runtime.common.js'
}
I am still getting this well known error:
我仍然收到这个众所周知的错误：
[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)
[Vue 警告]：无法挂载组件：未定义模板或渲染函数。（在根实例中找到）
How come when I don't even have a single thing inside my #app div where I mount Vue, I am still getting a render/template error? It says found in rootbut there is nothing to be found because it does not even have any content?
为什么当我在安装 Vue 的 #app div 中什至没有任何东西时，我仍然收到渲染/模板错误？它说found in root但是什么也找不到，因为它甚至没有任何内容？
How am I suppose to mount if this does not work?
如果这不起作用，我该如何安装？
Edit:
编辑：
I have tried it like this which seems to work:
我试过这样似乎有效：
new Vue(App).$mount('#app');
It make sense because using the elproperty implies you are 'scanning' that dom element for any components and it's useless because the runtime build does not have a compiler.
这是有道理的，因为使用该el属性意味着您正在“扫描”任何组件的 dom 元素，而且它是无用的，因为运行时构建没有编译器。
Still it is an extremely strange error message to throw, especially when I have my entire #app div emptied out.
仍然抛出一个非常奇怪的错误消息，尤其是当我的整个#app div 清空时。
Hopefully somebody could confirm my thoughts.
希望有人能证实我的想法。
采纳答案by Justin MacArthur
The reason you're receiving that error is that you're using the runtime build which doesn't support templates in HTML files as seen here vuejs.org
您收到该错误的原因是您使用的运行时构建不支持 HTML 文件中的模板，如vuejs.org 所示
In essence what happens with vue loaded files is that their templates are compile time converted into render functions where as your base function was trying to compile from your html element.
从本质上讲，vue 加载的文件发生的情况是，它们的模板在编译时被转换为渲染函数，而您的基本函数试图从您的 html 元素编译。
回答by mutiemule
In my case, I was getting the error because I upgraded from Laravel Mix Version 2 to 5.
就我而言，我收到错误是因为我从 Laravel Mix 版本 2 升级到了 5。
In Laravel Mix Version 2, you import vue components as follows:
在 Laravel Mix Version 2 中，你导入 vue 组件如下：
Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);
In Laravel Mix Version 5, you have to import your components as follows:
在 Laravel Mix 版本 5 中，您必须按如下方式导入组件：
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
Here is the documentation: https://laravel-mix.com/docs/5.0/upgrade
这是文档：https: //laravel-mix.com/docs/5.0/upgrade
Better, to improve performance of your app, you can lazy load your components as follows:
更好的是，为了提高应用程序的性能，您可以按如下方式延迟加载组件：
Vue.component("ExampleComponent", () => import("./components/ExampleComponent"));
回答by justo Bin solutions
If you used to calle a component like this:
如果你曾经像这样调用一个组件：
Vue.component('dashboard', require('./components/Dashboard.vue'));
I suppose that problem occurred when you update to laravel mix 5.0 or another libraries, so you have to put .default. As like below:
我想当您更新到 laravel mix 5.0 或其他库时会出现该问题，因此您必须放置 .default。如下所示：
Vue.component('dashboard', require('./components/Dashboard.vue').default);
I solved the same problem.
我解决了同样的问题。
回答by Asqan
In my case, I imported my component (in router) as:
就我而言，我将组件（在路由器中）导入为：
import bsw from 'common-mod/src/components/webcommon/webcommon'
It is simply solved if I changed it to
如果我将其更改为
import bsw from 'common-mod/src/components/webcommon/webcommon.vue'
回答by Dennis Adriaansen
If someone else keeps getting the same error. Just add one extra div in your component template.
如果其他人不断收到同样的错误。只需在组件模板中添加一个额外的 div。
As the documentation says:
正如文档所说：
Component template should contain exactly one root element
组件模板应该只包含一个根元素
Check this simple example:
检查这个简单的例子：
import yourComponent from '{path to component}'
export default {
components: {
yourComponent
},
}
// Child component
<template>
<div> This is the one! </div>
</template>
回答by Oleksandr Devhackerone
There is an update from Laravel Mix 3 to Laravel 4 which may affect the answer for all components.
See https://laravel-mix.com/docs/4.0/upgradefor more details.
从 Laravel Mix 3 到 Laravel 4 的更新可能会影响所有组件的答案。
有关更多详细信息，请参阅https://laravel-mix.com/docs/4.0/upgrade。
Let 'example-component'be the example component, whose address is './components/ExampleComponent.vue'.
让'example-component'是示例组件，其地址是'./components/ExampleComponent.vue'。
Laravel 3:
Laravel 3：
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Laravel 4:
拉维尔4：
The change is that a .defaultis added.
变化.default是添加了a 。
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
回答by Nicholas Betsworth
In my case, I was using a default import:
就我而言，我使用的是默认导入：
import VueAutosuggest from 'vue-autosuggest';
import VueAutosuggest from 'vue-autosuggest';
Using a named import fixed it:
import {VueAutosuggest} from 'vue-autosuggest';
使用命名导入修复它：
import {VueAutosuggest} from 'vue-autosuggest';
回答by Shaya Ulman
As a Summary of all the posts
作为所有帖子的摘要
This error:
这个错误：
[Vue warn]: Failed to mount component: template or render function not defined.
[Vue 警告]：无法挂载组件：未定义模板或渲染函数。
You're getting because of a certain problem that's preventing your component from being mounted.
你是因为某个问题阻止了你的组件被安装。
This can be caused by a lot of different issues, as you can see from the different posts here. Debug your component thoroughly, and be aware of everything that is maybe not done correctly and might prevent the mount.
这可能是由许多不同的问题引起的，您可以从此处的不同帖子中看到。彻底调试您的组件，并注意可能未正确完成并可能阻止安装的所有内容。
I was getting the error when my component file was not encoded correctly...
当我的组件文件未正确编码时，我收到错误...
回答by TetraDev
Make sure you import the .vueextension explicitly like so:
确保.vue像这样明确导入扩展：
import myComponent from './my/component/my-component.vue';
If you don't add the .vueand you have a .tsfile with the same name in that directory, for example, if you're separating the js/ts from the template and linking it like this inside of my-component.vue:
如果您不添加.vue并且.ts在该目录中有一个同名的文件，例如，如果您将 js/ts 与模板分开并像这样在 内部链接它my-component.vue：
<script lang="ts" src="./my-component.ts"></script>
... then the import will bring in the .tsby default and so there really is no template or render function defined because it didn't import the .vuetemplate.
...然后导入将.ts默认引入，因此实际上没有定义模板或渲染函数，因为它没有导入.vue模板。
When you tell it to use .vuein the import, then it finds your template right away.
当您告诉它.vue在导入中使用时，它会立即找到您的模板。
回答by Tohir
Something like this should resolve the issue..
这样的事情应该可以解决问题..
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default);
