堆棧內存溢出
  簡體   English   中英

尚未定義 Vue 模板或渲染函數我都沒有使用？

[英]Vue template or render function not defined yet I am using neither?

 原文  2017-02-01 15:39:42  9   28    javascript/ vuejs2/ vue-component/ vue.js

問題描述

這是我的主要 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 時。

希望有人能證實我的想法。

28 個解決方案

解決方案1
 75  2019-09-24 18:36:06

就我而言，我收到錯誤是因為我從 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

更好的是，為了提高應用程序的性能，您可以延遲加載組件，如下所示：

Vue.component("ExampleComponent", () => import("./components/ExampleComponent"));

解決方案2
 55  2019-12-31 02:46:53

如果你曾經這樣調用組件：

Vue.component('dashboard', require('./components/Dashboard.vue'));

我想當你更新到 laravel mix 5.0 或其他庫時會出現這個問題，所以你必須放 .default。 如下所示：

Vue.component('dashboard', require('./components/Dashboard.vue').default);

我解決了同樣的問題。

解決方案3
 37 已采納  2017-02-01 16:27:35

您收到該錯誤的原因是您使用的運行時構建不支持 HTML 文件中的模板，如vuejs.org 所示

本質上，vue 加載文件發生的情況是它們的模板在編譯時轉換為渲染函數，而您的基本函數試圖從您的 html 元素進行編譯。

解決方案4
 31  2018-10-25 11:20:36

就我而言，我將組件（在路由器中）導入為：

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

如果我將其更改為

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

解決方案5
 14  2017-08-01 17:26:53

如果其他人不斷收到相同的錯誤。 只需在組件模板中添加一個額外的 div。

正如文檔所說：

組件模板應該只包含一個根元素

檢查這個簡單的例子：

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

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

解決方案6
 11  2020-06-07 05:27:21

我以前的代碼是

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

當我遇到此類錯誤時，我只需將.default添加到它，它就可以工作了..

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

解決方案7
 8  2019-07-19 15:17:44

就我而言，我使用的是默認導入：

import VueAutosuggest from 'vue-autosuggest';

使用命名導入修復它： import {VueAutosuggest} from 'vue-autosuggest';

解決方案8
 8  2020-01-08 13:50:11

從 Laravel Mix 3 到 Laravel 4 的更新可能會影響所有組件的答案。
有關更多詳細信息，請參閱https://laravel-mix.com/docs/4.0/upgrade 。

讓'example-component'為示例組件，其地址為'./components/ExampleComponent.vue' 。

拉拉維爾 3：

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

Laravel 4：

變化是添加了.default 。

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

解決方案9
 7  2020-01-08 19:36:27

作為所有帖子的摘要

這個錯誤：

[Vue 警告]：無法掛載組件：未定義模板或渲染函數。

由於某個問題導致您的組件無法安裝，因此您得到了。

這可能是由許多不同的問題引起的，您可以從這里的不同帖子中看到。 徹底調試您的組件，並注意可能未正確完成並可能阻止安裝的所有內容。

當我的組件文件未正確編碼時出現錯誤...

解決方案10
 6  2019-10-10 16:02:23

這樣的事情應該可以解決這個問題..

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

解決方案11
 4  2020-06-22 13:31:14

我在 laravel 的 app.js 中有這個腳本，它會自動在組件文件夾中添加所有組件。

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))

要使其正常工作，只需添加默認值

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

解決方案12
 3  2018-09-25 10:16:50

我個人遇到了同樣的錯誤。 以上解決方案都不適合我。

事實上，我的組件看起來像這樣（在一個名為 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 個組件中工作，所以我無法真正理解為什么，但至少，現在到處都可以使用。

解決方案13
 3  2019-06-22 04:12:20

我不敢相信我是如何解決這個問題的！ 奇怪的解決方案！
我讓應用程序保持運行，然后我刪除了所有模板標簽，然后我再次將它們返回並且它工作了！ 但我不明白發生了什么。

解決方案14
 3  2020-02-05 17:49:12

確保像這樣顯式導入.vue擴展名：

import myComponent from './my/component/my-component.vue';

如果您不添加.vue並且在該目錄中有一個同名的.ts文件，例如，如果您將 js/ts 從模板中分離出來並在my-component.vue ：

<script lang="ts" src="./my-component.ts"></script>

...然后默認情況下導入將引入.ts ，因此實際上沒有定義模板或渲染函數，因為它沒有導入.vue模板。

當您告訴它在導入中使用.vue時，它​​會立即找到您的模板。

解決方案15
 2  2019-06-30 22:50:15

我正在使用帶有 vue-property-decorator 的 Typescript，發生在我身上的是我的 IDE 自動完成了“MyComponent.vue.js”而不是“MyComponent.vue”。 這給了我這個錯誤。

故事的寓意似乎是，如果您遇到此錯誤並且您正在使用任何類型的單文件組件設置，請檢查您在路由器中的導入。

解決方案16
 2  2019-10-11 05:08:02

當與故事書和打字機一起使用時，我必須添加

.storybook/webpack.config.js

const path = require('path');

module.exports = async ({ config, mode }) => {

    config.module.rules.push({
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true
                },
            }
        ],
    });

    return config;
};

解決方案17
 1  2020-05-06 15:54:46

我將在此處添加此 b/c 似乎有許多不同的原因導致出現此非常令人沮喪的錯誤。 就我而言，這是我的import語句中的語法問題。 我有

import DataTable from '@/components/data-table/DataTable';

當我應該有的時候

import DataTable from '@/components/data-table/';

您的項目設置和配置可能會有所不同，但如果您收到此錯誤，我建議您檢查組件的導入語法是否符合項目的預期。

解決方案18
 1  2021-06-22 17:59:08

就我而言，它對我有用

const routes = [
{ path: '/dashboard', component: require('./components/Dashboard.vue').default },
{ path: '/profile', component: require('./components/Profile.vue').default }]

解決方案19
 1  2021-10-02 18:53:45

這個錯誤對我來說是因為錯誤的導入

反而

components: {
  MyComp: import('./MyComp.vue'),
}

寫

components: {
  MyComp: () => import('./MyComp.vue'),
}

解決方案20
 1  2021-10-12 11:09:39

您缺少 HTML 部分的<template>標記。

解決方案21
 1  2021-11-18 19:09:22

嘗試在需要組件中添加 .default

   let routes = [{
   path: '/dashboard',
   component: require('./components/Dashboard.vue').default
  }
]

解決方案22
 1  2022-02-21 11:18:28

let allSalary = require('./components/salary/index.vue');

而是使用這個

let allSalary = require('./components/salary/index.vue').default;

解決方案23
 0  2019-07-02 12:01:00

在忘記將組件內容包含在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>

解決方案24
 0  2021-02-16 11:53:16

另一個想法是混合在一起......在我的例子中，引發錯誤的組件是一個具有自定義render()函數的無模板組件。 我不明白為什么它不起作用，直到我意識到我沒有在組件中的代碼周圍放置<script> ... </script>標簽（似乎沒有必要，因為我沒有模板或樣式標簽任何一個）。 不知道為什么這會通過編譯器......？

無論哪種方式...確保您使用<script>標簽 ;-)

解決方案25
 0  2021-04-07 17:35:54

我的visual.ts文件中的類似問題我不得不更改：

import { createApp } from 'vue'
import Visual from './Visual.vue'
- const app = createApp({Visual}).mount('#visual')
+ const app = createApp(Visual).mount('#visual')

解決方案26
 0  2021-06-23 17:40:32

 <template><div></div></template>

就我而言，我的子組件是空白的！ 我在沒有任何模板、腳本或樣式的父組件中導入它（完整的空白 child.vue 文件）。 所以我只是在我的子組件中添加了上面的模板並且它工作正常。

解決方案27
 0  2021-09-18 13:04:11

當我在 Laravel 工作時，這是一個錯誤。 對我有用的代碼

//require('./bootstrap');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Vue = require('vue');
import Vue from 'vue'

Vue.component('dictionary-index',  () => import('./components/DictionaryIndex.vue'));

Vue.component('dictionary-create',  () => import('./components/DictionaryCreate.vue'));

Vue.component('dictionary-cat',  () => import('./components/DictionaryCategory.vue'));

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

解決方案28
 0  2021-12-05 12:33:13

我通過刪除node_modules目錄並再次運行npm install和npm run dev解決了這個問題。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Vue 模板或渲染 function 未定義 生成Vue項目時出現錯誤“無法安裝組件：模板或渲染功能未定義” 盡管使用了完整的編譯器捆綁包，但Vue中的“無法安裝組件：模板或渲染功能未定義” 無法安裝組件：模板或渲染函數未定義-使用Laravel-mix時出現vue警告 無法掛載組件：模板或渲染函數未使用 vue.js 定義 Laravel - [Vue 警告]：無法掛載組件：未定義模板或渲染函數 Gulp [Vue 警告]：無法掛載組件：未定義模板或渲染函數 Vue警告：無法安裝組件：未定義模板或渲染功能 Vue.js 無法掛載組件：未定義模板或渲染函數 如何修復無法掛載組件：vue 中未定義模板或渲染函數
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM