laravel vue 2.0 无法挂载组件：未定义模板或渲染函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40071266/
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 2.0 Failed to mount component: template or render function not defined
提问by retrograde
I am using a Laravel Vue setup and pulling in Laravel Elixir, Webpack and laravel-elixir-vue-2package.
我正在使用 Laravel Vue 设置并引入 Laravel Elixir、Webpack 和laravel-elixir-vue-2包。
I have looked at several other SO questions and I know this is usually a problem with not referencing the standalone version of vue.js
我查看了其他几个 SO 问题，我知道这通常是不引用独立版本的 vue.js 的问题
However, the laravel-elixir-vue-2 package aliases vue to the standalone version so templates can be loaded from .vue files. Still, I get this error every time:
但是，laravel-elixir-vue-2 包将 vue 别名为独立版本，因此可以从 .vue 文件加载模板。尽管如此，我每次都会收到此错误：
[Vue:Warn] vue 2.0 Failed to mount component: template or render function not defined. (found in component <top> at ../resources/assets/js/components/top.vue)
I can see that vue.js is being pulled in from vue/dist/vue.js?0598:2611 in the console.
我可以看到 vue.js 正在从控制台中的 vue/dist/vue.js?0598:2611 拉入。
Can anyone see what I'm missing?
谁能看到我错过了什么？
app.js
应用程序.js
import Vue from 'vue'
import top from './components/top.vue'
new Vue({
el: '#app',
components: { top }
})
//I've also tried this:
// new Vue({
// components: {
// top
// },
// render: h => h(top),
// }).$mount('#app')
top.vue
顶.vue
<template>
<div class="top">
<p>hi</p>
</div>
</template>
<script>
export default {};
</script>
index.blade.php
index.blade.php
<div>
<div id="app">
<top></top>
</div>
</div>
{!! HTML::script('js/app.js') !!}
package.json
包.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.0",
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2"
}
}
gulp.js
gulp.js
var elixir = require('laravel-elixir');
elixir.config.sourcemaps = true;
require('laravel-elixir-vue-2');
elixir(function(mix) {
mix.webpack('app.js', 'public/assets/js');
});
Edit: update
编辑：更新
Changing the gulp.js syntax fixed my error.
更改 gulp.js 语法修复了我的错误。
var elixir = require('laravel-elixir')
require('laravel-elixir-vue-2')
elixir(mix => {
mix.webpack('app.js');
mix.styles([
"normalize.css",
"main.css"
]);
});
edit:I added export default {}; to the template script
编辑：我添加了导出默认 {}; 到模板脚本
回答by Markus Schober
Like my comment in the question, I had the same problem. In my case I had two elixir calls like this:
就像我在问题中的评论一样，我遇到了同样的问题。就我而言，我有两个像这样的长生不老药调用：
elixir(mix => {
mix.browserSync({
proxy: 'example.dev',
open: false
});
});
elixir(mix => {
mix.sass('app.scss');
mix.webpack('app.js');
});
I don't know why, but the two elixir calls are breaking webpack. I change my gulpfile to:
我不知道为什么，但是这两个 elixir 调用正在破坏 webpack。我将我的 gulpfile 更改为：
elixir(mix => {
mix.sass('app.scss');
mix.webpack('app.js');
mix.browserSync({
proxy: 'example.dev',
open: false
});
});
@retrograde, thx for your hint in your comment :)
@retrograde，感谢您在评论中的提示:)
Edit: See this Laravel Elixir Issue
编辑：请参阅此Laravel Elixir 问题
回答by Alexander van Zyl
Hi have had this issue before when playing around with VueJs 2.0 RC I think what I did was create a webpack.config.js in the project root and add the following:
嗨，之前在玩 VueJs 2.0 RC 时遇到过这个问题，我想我所做的是在项目根目录中创建一个 webpack.config.js 并添加以下内容：
module.exports = {
resolve: {
alias: {
vue: 'vue/dist/vue.js',
}
}
};
Also not sure it would make a difference but before trying the above maybe add "vue": "^2.0.1", to your package.json file and do npm install (or just npm install vue)
也不确定它会有所作为，但在尝试上述操作之前，可以将“vue”：“^2.0.1”添加到您的 package.json 文件中并执行 npm install （或只是 npm install vue）
回答by Joseph Silber
Even if your component has no options, its scripttag still has to export an empty object, so that vue-loadercan inject the renderfunction into it:
即使你的组件没有选项，它的script标签仍然必须导出一个空对象，以便vue-loader可以将render函数注入其中：
<template>
<div class="top">
<p>hi</p>
</div>
</template>
<script>
export default {};
</script>
