아직 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의 웹 팩 구성:
alias: {
'vue$': 'vue/dist/vue.runtime.common.js'
}
아직 이 well-known 에러가 발생하고 있습니다.
[Vue warn] :구성 요소를 마운트하지 못했습니다. 템플릿 또는 렌더 함수가 정의되지 않았습니다(루트 인스턴스에 있음).
Vue를 마운트하는 #app div에 아무것도 없는데도 렌더링/템플릿 오류가 나타나는 이유는 무엇입니까? it found in root내도 없어 어을 을?? ???
이것이 작동하지 않으면 어떻게 마운트해야 합니까?
편집:
이렇게 해봤는데 효과가 있는 것 같아요.
new Vue(App).$mount('#app');
, 이치를 하니까.el를 '하고 때문에할 수 없음을 합니다.
그러나 특히 #app div가 모두 비워졌을 때 이는 매우 이상한 오류 메시지입니다.
누군가 내 생각을 확인해 줬으면 좋겠어.
제 경우 Laravel Mix 버전2에서 5로 업그레이드했기 때문에 에러가 발생하고 있었습니다.
Laravel Mix 버전 2에서는 다음과 같이 vue 구성 요소를 가져옵니다.
Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);
Laravel Mix 버전 5에서는 다음과 같이 컴포넌트를 Import해야 합니다.
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"));
컴포넌트를 다음과 같이 호출하는 경우:
Vue.component('dashboard', require('./components/Dashboard.vue'));
아마 larabel mix 5.0 또는 다른 라이브러리로 업데이트 할 때 문제가 발생했으므로 .default를 사용해야 합니다.이하와 같습니다.
Vue.component('dashboard', require('./components/Dashboard.vue').default);
저도 같은 문제를 풀었어요.
이 에러가 발생하는 이유는, vuejs.org 에서 볼 수 있듯이 HTML 파일의 템플릿을 지원하지 않는 런타임 빌드를 사용하고 있기 때문입니다.
기본적으로 vue 로딩된 파일에서 발생하는 것은 템플릿이 기본 함수가 html 요소에서 컴파일하려고 했던 렌더 함수로 변환되는 것입니다.
내 경우 컴포넌트(라우터 내)를 다음과 같이 Import했습니다.
import bsw from 'common-mod/src/components/webcommon/webcommon'
로 바꾸면 간단하게 해결됩니다.
import bsw from 'common-mod/src/components/webcommon/webcommon.vue'
다른 사람이 계속 같은 에러가 나면.컴포넌트 템플릿에 div를 하나만 더 추가해 주세요.
설명서에 기재되어 있는 바와 같이:
구성 요소 템플릿은 루트 요소를 하나만 포함해야 합니다.
다음의 간단한 예를 확인해 주세요.
import yourComponent from '{path to component}'
export default {
components: {
yourComponent
},
}
// Child component
<template>
<div> This is the one! </div>
</template>
이전 코드는
Vue.component('message', require('./components/message.vue'));
가 나면 을 해요..default그리고 효과가 있었어
Vue.component('message', require('./components/message.vue').default);
제 경우 기본 Import를 사용하고 있었습니다.
import VueAutosuggest from 'vue-autosuggest';
import {VueAutosuggest} from 'vue-autosuggest';
Laravel Mix 3에서 Laravel 4로의 업데이트가 있어 모든 컴포넌트의 답변에 영향을 줄 수 있습니다.
상세한 것에 대하여는, https://laravel-mix.com/docs/4.0/upgrade 를 참조해 주세요.
let let 렛츠고'example-component'주소가 다음과 같은 컴포넌트의 예를 들 수 있습니다.'./components/ExampleComponent.vue'.
라라벨 3:
Vue.component('example-component', require('./components/ExampleComponent.vue'));
라라벨 4:
은 '우리'가 ''가.default을 사용하다
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
이와 같은 방법으로 문제를 해결할 수 있습니다.
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default);
모든 투고의 요약으로서
다음 오류:
[Vue warn] :구성 요소를 마운트하지 못했습니다. 템플릿 또는 렌더링 함수가 정의되지 않았습니다.
컴포넌트를 마운트할 수 없는 특정 문제로 인해 문제가 발생하고 있습니다.
이 문제의 원인은 여러 가지입니다.이 투고에서는 알 수 있습니다.컴포넌트를 완전히 디버깅하여 올바르게 동작하지 않거나 마운트를 방해할 수 있는 모든 것에 주의하십시오.
컴포넌트 파일이 올바르게 인코딩되지 않았을 때 오류가 발생했습니다.
이 스크립트는 app.js의 larabel에 있습니다.이 스크립트는 컴포넌트 폴더에 모든 컴포넌트를 자동으로 추가합니다.
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))
저도 개인적으로 같은 실수를 했어요.위의 솔루션 중 어느 것도 나에게 효과가 없었다.
실제로 내 컴포넌트는 다음과 같습니다(my-component.js 파일).
Vue.component('my-component', {
data() {
return {
...
}
},
props: {
...
},
template:`
<div>
...
</div>
`
});
다른 컴포넌트에 다음과 같이 Import했습니다.
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;
당연한 것처럼 보일 수도 있지만, 위에서 말한 것처럼 이것이 없으면 다른 컴포넌트에서도 동작하기 때문에 이유를 알 수 없었지만, 적어도 지금은 어디에서나 동작하고 있습니다.
내가 어떻게 문제를 해결했는지 믿을 수 없어! 이상한 해결책!
앱을 계속 실행하다가 모든 템플릿 태그를 제거하고 다시 돌려보냈더니 작동했어요! 그런데 무슨 일이 일어났는지 모르겠어요.
vue-property-decorator에서 Typescript를 사용하고 있는데 IDE가 "MyComponent"를 자동으로 완료했습니다."MyComponent.vue" 대신 "vue.js"를 선택합니다.그래서 이 오류가 발생했습니다.
이 에러가 발생하여 임의의 종류의 단일 파일컴포넌트 셋업을 사용하고 있는 경우 라우터에서 Import를 체크하는 것이 이 이야기의 교훈인 것 같습니다.
동화책이나 활자 서클과 함께 사용할 때는
.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;
};
..vue확연하게 확장하다
import myComponent from './my/component/my-component.vue';
」를 하지 않는 .vue은 '그것'을 있다..ts 같은 이름의 입니다.my-component.vue:
<script lang="ts" src="./my-component.ts"></script>
으로...【 Import】.ts 않습니다.이나 렌더 함수가 때문입니다.이는 템플릿 또는 렌더 함수가 Import되지 않았기 때문입니다..vue플릿입입니니다
하라고 때.vue그러면 템플릿이 즉시 검색됩니다.
여기에 덧붙이겠습니다만, 이 매우 짜증나는 에러가 발생하는 이유는 여러 가지가 있는 것 같습니다.였습니다.import술.
import DataTable from '@/components/data-table/DataTable';
내가 가졌어야 할 때
import DataTable from '@/components/data-table/';
프로젝트 셋업과 설정은 다를 수 있지만 이 오류가 발생할 경우 컴포넌트의 Import 구문이 프로젝트의 예상대로인지 확인하는 것이 좋습니다.
저 같은 경우에는 효과가 있었어요.
const routes = [
{ path: '/dashboard', component: require('./components/Dashboard.vue').default },
{ path: '/profile', component: require('./components/Profile.vue').default }]
이 오류는 잘못된 수입으로 인한 것입니다.
대신
components: {
MyComp: import('./MyComp.vue'),
}
쓰다
components: {
MyComp: () => import('./MyComp.vue'),
}
문장이 빠져있어요.<template>HTML 분 html html html html html 。
require 컴포넌트에 .default를 추가해 보겠습니다.
let routes = [{
path: '/dashboard',
component: require('./components/Dashboard.vue').default
}
]
했습니다.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
},
]
});
그럼 집에서.가지고 있는 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>
…경우 이 없는 .render()왜하지 않는지 알 수 그때서야 . 그제서야 제가 이 장치를<script></script> 왜 게??
쪽이든... 꼭하세요... 꼭 네 주머니를<script>표시;-)
가 있습니다.visual.ts파일을 변경해야 했습니다.
import { createApp } from 'vue'
import Visual from './Visual.vue'
- const app = createApp({Visual}).mount('#visual')
+ const app = createApp(Visual).mount('#visual')
<template><div></div></template>내 경우, 내 자식 컴포넌트가 공백이었다! 그리고 나는 템플릿, 스크립트, 스타일(완전한 공백 자식) 없이 부모 컴포넌트에 그것을 Import하고 있었다.vue 파일)을 클릭합니다.그래서 방금 아이 컴포넌트에 위의 템플릿을 추가했는데 정상적으로 작동합니다.
내가 라라벨에서 일할 때 그건 실수였어나에게 효과가 있었던 암호는
//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',
});
을 이문 the the the the the 를 제거함으로써 했다.node_modules 및 run을 실행합니다.npm install ★★★★★★★★★★★★★★★★★」npm run dev
let allSalary = require('./components/salary/index.vue');
대신 이것을 사용한다.
let allSalary = require('./components/salary/index.vue').default;
언급URL : https://stackoverflow.com/questions/41983767/vue-template-or-render-function-not-defined-yet-i-am-using-neither
'programing' 카테고리의 다른 글
| expr에서의 오버플로를 회피하는 방법.A * B - C * D (0) | 2022.08.28 |
|---|---|
| Vue warn: 구성 요소를 마운트하지 못했습니다. 템플릿 또는 렌더 함수가 정의되지 않았습니다. (0) | 2022.08.28 |
| Java의 파일 내 줄 수 (0) | 2022.08.28 |
| Nuxt 유니버설 앱서버 측 Vuex 스토어는 사용자의 머신에 관계없이 요청 간에 캐시됩니다. (0) | 2022.08.28 |
| 다이내믹 어레이를 C의 구조체 내부에 포함하려면 어떻게 해야 합니까? (0) | 2022.08.28 |