web-dev-qa-db-ja.com

Vueテンプレートまたはレンダリング関数はまだ定義されていませんどちらも使用していませんか？

これは私のメインjavascriptファイルです。

import Vue from 'vue'

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

私のHTMLファイル：

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

    <script src="{{ mix('/js/app.js') }}"></script>
</body>

ランタイムビルドを使用したVue.jsのWebpack構成：

alias: {
    'vue$': 'vue/dist/vue.runtime.common.js'
}

私はまだこのよく知られているエラーを受け取っています：

[Vue警告]：コンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません。 （ルートインスタンスにあります）

Vueをマウントする#app div内に単一のものすら持っていないのに、どうしてレンダー/テンプレートエラーが発生しますか？ found in rootしかし、コンテンツすら持っていないので、何も見つかりませんか？

これが機能しない場合、どのようにマウントすると思いますか？

編集：

私はこれがうまくいくように試してみました：

new Vue(App).$mount('#app');

elプロパティを使用すると、コンポーネントのdom要素を「スキャン」していることを意味し、ランタイムビルドにコンパイラがないため役に立たないため、これは理にかなっています。

それでも、特に#app div全体を空にした場合は、非常に奇妙なエラーメッセージがスローされます。

誰かが私の考えを確認できれば幸いです。

javascriptvuejs2vue-componentvue.js
16
Stephan-v

このエラーが発生する理由は、ここに見られるように、HTMLファイルのテンプレートをサポートしないランタイムビルドを使用しているためです vuejs.org

基本的にvueロードされたファイルで起こることは、テンプレートがコンパイル時にコンパイルされ、ベース関数がhtml要素からコンパイルしようとしていたレンダリング関数に変換されることです。

10
Justin MacArthur

他の誰かが同じエラーを繰り返している場合。コンポーネントテンプレートに1つの追加divを追加するだけです。

ドキュメントが言うように：

コンポーネントテンプレートには、ルート要素を1つだけ含める必要があります

次の簡単な例を確認してください。

 import yourComponent from '{path to component}'
    export default {
        components: {
            yourComponent
        },
}

 // Child component
 <template>
     <div> This is the one! </div>
 </template>
10
Dennis Adriaansen

私の場合、次のようにコンポーネントを（ルーターで）インポートしました。

import bsw from 'common-mod/src/components/webcommon/webcommon'

私はそれを変更した場合、それは単に解決されます

import bsw from 'common-mod/src/components/webcommon/webcommon.vue'
10
Asqan

私はvue-property-decoratorでTypeScriptを使用していますが、私に起こったことは、「IDE「MyComponent.vue」の代わりに「MyComponent.vue.js」を自動補完したことです。エラー。

話の教訓は、このエラーが発生し、あらゆる種類の単一ファイルコンポーネントのセットアップを使用している場合、ルーターでインポートを確認するということです。

1
LeftOnTheMoon

コンポーネントの内容をtemplate要素で囲むのを忘れる前に、同じエラーが発生しました。

私はこれを最初に持っています

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './com/Home.vue';

Vue.use(VueRouter);

Vue.router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
    ]
});

次に、Home.vueにあります：

<h1>Hello Vue</h1>

したがって、エラー：

Failed to mount component: template or render function not defined.

found in

---> <Home> at resources/js/com/Home.vue
       <Root>

要素で囲むとエラーが修正されました。

<template>
   <h1>Hello Vue</h1>
</template>
0
Emeka Mbah

どうやって問題を修正したのか信じられません！奇妙な解決策！
アプリの実行を続けた後、すべてのテンプレートタグを削除し、再びそれらを返して動作しました！しかし、私は何が起こったのか理解できません。

0
Tanaka

私は個人的に同じエラーに遭遇しました。上記の解決策はどれも私にとってはうまくいきませんでした。

実際、私のコンポーネントは次のようになります（my-component.jsというファイル内）：

Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

そして、このように別のコンポーネントにインポートしました：

import MyComponent from '{path-to-folder}/my-component';

Vue.component('parent_component', {
    components: {
        MyComponent
    }
});

奇妙なことに、これは一部のコンポーネントでは機能しましたが、この「parent_component」では機能しませんでした。そのため、コンポーネント自体でしなければならなかったことは、変数に保存してデフォルトとしてエクスポートすることでした。

const MyComponent = Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

export default MyComponent;

当たり前のように思えるかもしれませんが、上で言ったように、これは他の1つのコンポーネントで機能します。

0
ZyDucksLover

私の場合、Laravel Mixバージョン2から5にアップグレードしたため、エラーが発生していました。

Laravel Mixバージョン2では、次のようにvueコンポーネントをインポートします。

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

Laravel Mixバージョン5では、次のようにコンポーネントをインポートする必要があります。

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

ドキュメントは次のとおりです。 https://laravel-mix.com/docs/5.0/upgrade

0
mutiemule

私の場合、デフォルトのインポートを使用していました。

import VueAutosuggest from 'vue-autosuggest';

名前付きインポートを使用すると修正されました：import {VueAutosuggest} from 'vue-autosuggest';

0
Nicholas Betsworth