使用 js 文件作为 Vue 组件时出现错误 "Failed to mount component: template or render function not defined."

Question

我在 Laravel 5.3 中使用 Vue。我已经与 Laravel 5.2 合作过。但是 Laravel 5.3 和 Vue.js 对我来说是新的。所以我正在玩这些对。我已成功完成 Laravel Passport 教程。现在我要做的是将我的 html 模板放在 blade 文件中，并将 js 代码放在 Vue 组件中。但我收到此错误：

[Vue warn]: Failed to mount component: template or render function not defined. (found in component )

所以我无法理解这个错误的原因，因为我是 Vue.js 的新手。如果有人知道答案，将不胜感激。这是我的代码。

Blade 文件

<body>
    <div id="app">
        <tasks></tasks>
    </div>
    <template id="tasks-template">
        <ul class="list-group">
            <li class="list-group-item" v-for="task in list">
                @{{task.body}}
            </li>
        </ul>
    </template>
    <script src="/js/app.js"></script>
</body>

/resources/assets/js/app.js

require('./bootstrap');
Vue.component('tasks', require('./components/Tasks'));
const app = new Vue({
    el: '#app'
});

/resources/assets/js/components/Tasks.js

export default {
    template: '#tasks-template',
    data: function () {
        return {
            list: ''
        };
    },
    created: function() {
        this.$http.get('/api/tasks').then((response) => {
            this.list = response.body;
        }, (response) => {
            alert(0);
        });
    }
}

更新

Blade 文件

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

/resources/assets/js/components/Tasks.js

template: require('../components/tasks-template.html'),

而不是

template: '#tasks-template'

/resources/assets/js/components/tasks-template.html

<ul class="list-group">
    <li class="list-group-item" v-for="task in list">
        {{task.body}}
    </li>
</ul>

但现在出现此错误。

Uncaught Error: Module parse failed: /var/www/html/casesync/resources/assets/js/components/tasks-template.html Unexpected token (1:0) You may need an appropriate loader to handle this file type. | | | @{{task.body}}

Answer 1

假设您的模板文件为

/*  resources/assets/js/components/tasks.template.html */

<div class="tasks-component component">
    <ul class="list-group">
        <li class="list-group-item" v-for="task in list">
            {{task.body}}
        </li>
    </ul>
</div>

那么 Tasks.js 就是

/*  resources/assets/js/components/Tasks.js  */

export default {
    template: require('./tasks.template.html'),
    data: function () {
        return {
            list: ''
        };
    },
    created: function() {
        this.$http.get('/api/tasks').then((response) => {
            this.list = response.body;
        }, (response) => {
            alert(0);
        });
    }
}

您可以将 app.js 作为

/*  app.js  */

require('./bootstrap');
Vue.component('tasks', require('./components/Tasks').default);
const app = new Vue({
    //el: '#app'
}).$mount('#app'); 

//your main index.php or entry point could be  
<body>
<div id="app">
    <tasks></tasks>
</div>
</body>

更新

要使 default/out-of-box webpack 配置在 Laravel5.3 上运行，您需要通过 npm

引入 html-loader

npm install html-loader --save-dev

然后在 gulpfile.js - 指定 html-loader 用于 .html 文件。

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2'); 

const config = {
  module: {
    loaders:[
        {
            test: /\.html$/,
            loader: 'html'
        }
    ]
  }
};

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

最后，您可以在 main/entry 文件 app.js 中将全局组件注册为

Vue.component('test-component', require('./test-component').default);

/*  Or using ES2015 import */

import TestComponent from './test-component';
Vue.component('test-component', TestComponent);

我得到了@Alfa 的帮助

Answer 2

应该是require('./components/Example.vue').default。从 v13 开始，vue-loader 将组件导出为默认键，使用 import 时仍然有效，但使用 require 时需要以上内容。

Answer 3

我在导入 vue 组件时遇到了同样的问题。你必须改变

Vue.component('tasks', require('./components/Tasks'));

改为

Vue.component('tasks', require('./components/Tasks').default);

使用 js 文件作为 Vue 组件时出现错误 "Failed to mount component: template or render function not defined."

Getting error "Failed to mount component: template or render function not defined." while using js file as Vue component

laravel

vue.js

vue-component

laravel-5.3

vuejs2