Laravel 5.4 Vue.JS 组件挂载失败：未定义模板或渲染函数

Question

从 Vue.js 开始，想尝试一下 laravel 附带的示例。

没有显示任何组件，在控制台中我得到

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

found in

---> <Example>
   <Root>

不是全新安装，从 5.2->5.3->5.4 升级

resources/assets/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
Vue.component('example', require('./components/Example.vue'));

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

resources/assets/js/components/Example.vue

<template>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Example Component</div>

                <div class="panel-body">
                    I'm an example component!
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

这是我有 js

的 blade

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <link rel="stylesheet" href="css/app.css">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
    <body>
    <div id="app">
        <example></example>
    </div>
        <script src="js/app.js" charset="utf-8"></script>
    </body>
</html>

webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

Answer 1

这与您安装 Vue 的方式有关。一次它需要编译器而另一次不需要 https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only 。

你可以试试我的方法（纯vue项目，由vue webpack模板制作）：

import Vue from 'vue'
import App from './App'
import Example from './components/Example'
import router from './router' //this will import router/index.js

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App, Example }
})

这将在全局对象中挂载组件。

Answer 2

应该是require('./components/Example.vue').default。从 v13 开始，vue-loader 将组件导出为默认密钥，在使用 import 时仍然有效，但在使用 require.

时需要上述内容

Answer 3

截至目前，我的膏药是向所有 Vue 对象的组件添加一个 'default()'。

Vue.component('form-component', require('./components/FormComponent').default);
Vue.component('gratitude-pop', require('./components/GratitudePop').default);//..etc..etc

运行这个包裹：

  "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17"
    },
    "dependencies": {
        "vuex": "^3.0.1"
    }

Throw in your thumbs-up for using VUEX ;P

Answer 4

试试这个

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

Answer 5

我已经通过使用轻松解决了这个问题 .default方法末尾 require().default 在下一行。

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

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

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

Answer 6

删除文件夹node_modules
运行 npm 安装

将以下行添加到 package.json

"webpack": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

npm 运行 webpack
npm 运行观看
不要改变任何其他东西

Answer 7

而不是

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

使用这个

Vue.component ('example', require ('./components/Example.vue').default);

Answer 8

只是在上述答案之上添加一小段信息。

如果在抛出错误的组件上添加 .default，则错误已修复。

Laravel 5.4 Vue.JS 组件挂载失败：未定义模板或渲染函数

Laravel 5.4 Vue.JS Failed to mount component: template or render function not defined

laravel

vue.js