vue 2.0 无法挂载组件：未定义模板或渲染函数答案

【问题标题】：vue 2.0 Failed to mount component: template or render function not definedvue 2.0 无法挂载组件：未定义模板或渲染函数
【发布时间】：2017-02-25 13:04:24
【问题描述】：

我正在使用 Laravel Vue 设置并引入 Laravel Elixir、Webpack 和 laravel-elixir-vue-2 包。

我查看了其他几个 SO 问题，我知道这通常是不引用 vue.js 的独立版本的问题

但是，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)

我可以看到 vue.js 正在从控制台中的 vue/dist/vue.js?0598:2611 拉进来。

谁能看到我错过了什么？

app.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

<template>
   <div class="top">
     <p>hi</p>
   </div>
</template>
<script>
 export default {};
</script>

index.blade.php

<div>
   <div id="app">
<top></top>
   </div>
</div>
{!! HTML::script('js/app.js') !!}

package.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

var elixir = require('laravel-elixir');
elixir.config.sourcemaps = true;
require('laravel-elixir-vue-2');

elixir(function(mix) {
  mix.webpack('app.js', 'public/assets/js');
});

编辑：更新

更改 gulp.js 语法修复了我的错误。

var elixir = require('laravel-elixir')
require('laravel-elixir-vue-2')

elixir(mix => {

  mix.webpack('app.js');

  mix.styles([
    "normalize.css",
    "main.css"
    ]);

});

编辑：我添加了导出默认{}；到模板脚本

【问题讨论】：

您还没有向我们展示top 组件。
第二个代码 sn-p: top.vue
在使用之前尝试使用Vue.Component(name, url) 注册组件。我真的不明白为什么你应该得到那个错误。
我也有同样的问题。正确的 vue 被加载。使用新的 laravel 安装它可以工作。在我第一次开始 gulp 后，它停止了工作。
@MarkusSchober 我刚刚完成了这个工作（嗯，一个非常基本的设置工作）。改变我的 gulp.js 文件中的语法就是答案。我将更新我的问题以显示新语法

标签： laravel vue.js laravel-elixir

【解决方案1】：

就像我在问题中的评论一样，我遇到了同样的问题。就我而言，我有两个这样的长生不老药调用：

elixir(mix => {
    mix.browserSync({
        proxy: 'example.dev',
        open: false
    });
});

elixir(mix => {
    mix.sass('app.scss');
    mix.webpack('app.js');
});

我不知道为什么，但是这两个 elixir 调用正在破坏 webpack。我将 gulpfile 更改为：

elixir(mix => {
    mix.sass('app.scss');
    mix.webpack('app.js');
    mix.browserSync({
        proxy: 'example.dev',
        open: false
    });
});

@retrograde，感谢您在评论中的提示 :)

编辑：看到这个Laravel Elixir Issue

【讨论】：

感谢您将其放入答案表单中。希望这可以为人们节省数小时的挫败感。
遇到这个问题并解决了这个问题，奇怪的问题。

【解决方案2】：

您好之前在玩 VueJs 2.0 RC 时遇到过这个问题，我想我所做的是在项目根目录中创建一个 webpack.config.js 并添加以下内容：

module.exports = {
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js',
        }
    }
};

也不确定这会有所不同，但在尝试上述方法之前，可能会在您的 package.json 文件中添加“vue”：“^2.0.1”并执行 npm install（或只是 npm install vue）

【讨论】：

npm 包 'laravel-elixir-vue-2' 包含该别名引用。我的 vue 文件是 vue/dist/vue.js （在控制台中检查）。不幸的是，我仍然无法让它工作。

【解决方案3】：

即使你的组件没有选项，它的script 标签仍然需要导出一个空对象，以便vue-loader 可以将render 函数注入其中：

<template>
   <div class="top">
     <p>hi</p>
   </div>
</template>

<script>
    export default {};
</script>

【讨论】：