Laravel 5.4 Vue.JSコンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません

Vue.jsからはじまり、laravelに付属のサンプルを試してみたいです。Laravel 5.4 Vue.JSコンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません

ませコンポーネントが表示されず、コンソールに私がインストール

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

found in 

---> <Example> 
    <Root>

は、新鮮な未取得、5.2-> 5.3-> 5.4

資源/資産/ 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' 
});

資源/資産/のJS /コンポーネント/

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

Example.vue

これは私がJS

<!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>

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

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

出典

2017-09-07 Carlos F

ここにlaravel mixxはありますか？ webpack.mix.jsを表示できますか？（ルートで） – cssBlaster21895

はい、私はlaravel mixを持っていて、webpackを投稿に追加しました。 –

別のものは、あなたのパッケージjsonをソースと比較することができます - 特にvueのバージョンhttps://github.com/laravel/laravel/blob/master/package.json – cssBlaster21895

それはあなたがVueのをマウントする方法に関係していwebpack.mix.jsを持っているブレードです。 1回はコンパイラが必要で、もう1回はhttps://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-onlyではありません。

あなたは（それがVUEのWebPACKのテンプレートから作られた純粋なVUEプロジェクト、である）私の方法を試みることができる：これはグローバルオブジェクト内のコンポーネントを実装します

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 } 
})

。

出典

2017-09-07 19:44:38 cssBlaster21895

そしてこの場合、私はランタイムのみ必要でしょうか？リンクからどのように私はやっているか、構造体を変更する必要がありますか適応するだろう –

main.jsの中に入れて何かエラーを返しますか？ – cssBlaster21895

ちょうどそれを私のものに適応させて、ちょうどそれがランタイム+コンパイラビルドであると思っていたのですか？ –

require('./components/Example.vue').defaultである必要があります。 v13以降、importを使用しても同じ動作をするが、requireを使用する場合は上記を必要とするので、vue-loaderはコンポーネントをデフォルトのキーとしてエクスポートします。

出典

2018-01-24 18:02:36

上記の答えを明確にするために、vue-loader（14.1.1）とvue-template-compiler（2.5.13）とvue 2.5を含む、package.jsonに追加のvue依存関係があった問題を解決しました。 .13。 app.jsのrequire行に.defaultを追加すると、コンソールのエラーがなくなり、コンポーネントが機能することができます。追加の依存関係を削除すると、問題が解決されたように見えるので、問題が発生したのは純粋にvue 2.5.13ではありません（元の回答では不明なようです）。上記の依存関係が必要な場合は、これがトリックです！ –

Laravel 5.4 Vue.JSコンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません

答えて

関連する問題