반응형
VueJs: 컴포넌트 마운트 실패
Vue Router를 사용하고 있는데 컴포넌트를 로드하는 대신 다음과 같은 막연한 오류가 발생합니다.
Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Root>
여기 엔트리 포인트(app.js)가 있습니다(CommonsChunksPlugin과 조합하여 여러 엔트리를 사용하고 있습니다).
import Vue from 'vue'
import '../../../assets/css/main.css'
import App from './app.vue'
new Vue(App).$mount('#app')
HTML 파일(app.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div id="app"></div>
</body>
</html>
(앱.vue)
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import {
router,
} from './bootstrap.js';
export default {
router,
};
</script>
라우터:
import Vue from 'vue';
import VueRouter from 'vue-router';
var routes = [
{
path: '/login',
name: 'login.index',
component: require('./index/index.vue'),
},
{
path: '/',
redirect: '/login',
},
];
Vue.use(VueRouter);
export const router = new VueRouter({
routes,
});
Vue.router = router;
export default {
router,
};
마지막으로 컴포넌트:
<template>
<div>
<h1>Test</h1>
</div>
</template>
<script>
export default {}
</script>
예상대로 /login으로 리다이렉트 됩니다만, 컴포넌트가 로드되지 않습니다.
https://github.com/vuejs/vue-loader/releases/tag/v13.0.0 에서 설명하는 변경사항이 발생할 수 있습니다.
의 끝에 .default를 추가해 보십시오.require().
component: require('./index/index.vue').default
app.js 파일에서 구성 요소를 가져오지 않았습니다. 이 구성 요소 파일을 가져와야 합니다.이름이 xyz라고 칩시다.표시하다
import componentName from 'path';
<template>
<div>
<h1>Test</h1>
</div>
</template>
<script>
export default {}
</script>언급URL : https://stackoverflow.com/questions/45964665/vuejs-failed-to-mount-component
반응형
'programing' 카테고리의 다른 글
| C에서 유니코드 문자열의 문자를 카운트하는 방법 (0) | 2022.08.17 |
|---|---|
| IntelliJ IDEA를 사용하여 사용하지 않는 코드를 찾으려면 어떻게 해야 합니까? (0) | 2022.08.17 |
| 스프링 MVC - Rest 컨트롤러에서 단순 문자열을 JSON으로 반환하는 방법 (0) | 2022.08.17 |
| 데이터 로드 처리 - Vue (0) | 2022.08.17 |
| 동일한 기호 중 일부를 사용하여 두 개의 공유 라이브러리 연결 (0) | 2022.08.17 |