검색되지 않은 TypeError: Vue.component가 함수가 아님
Laravel/Homested가 설치된 OS X에서 Vue(v2.2.1)를 사용하여 오류가 발생하는 경우구성 요소가 로드되지 않고 콘솔 오류가 "Uncaught TypeError: Vue.component는 함수가 아님"입니다.
전체 콘솔 오류
Uncaught TypeError: Vue.component is not a function
at eval (eval at <anonymous> (app.js:321), <anonymous>:17:5)
at Object.<anonymous> (app.js:321)
at __webpack_require__ (app.js:20)
at app.js:64
at app.js:67
나를 화나게 하는 것은 내가 app.js를 변경하면 웹팩은 어떤 변경사항도 반영하지 않는다는 것이다.그래서 나는 A) 위의 문제를 수정해야 하고, B) 어떻게 하면 웹 팩이 콘솔에 업데이트를 보여줄 수 있는지 알아내야 한다.
어떤 도움이라도 정말 고마워!난 졸병이야.여기 내 암호야...
app.js 파일
Vue.component('video-upload', require('./components/VideoUpload.vue'));
const app = new Vue({
el: 'body'
});
비디오업로드.부에를 하다
<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</div>
<div class="panel-body">
This is an example
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
update.closure.php
@extends('layouts.app')
@section('content')
<video-upload></video-upload>
@endsection
꾸러미json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-vue": "^0.1.4",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.14.0",
"video.js": "^5.11.6",
"vue": "^2.2.1",
"vue-resource": "^0.9.3"
}
}
업데이트 후laravel-mix 5.0.9로laravel-mix 6.0.11Laravel 7 프로젝트에서 vue 컴파일된 뷰에서 이 오류를 보기 시작했다.Vue 패키지로 통화 변경:
사용하다
import Vue from 'vue'대신에window.Vue = require("vue");날 위해 일했어
다음과 같은 가져오기 키워드를 사용하여 코드에 vue를 올바르게 가져오기:
//import vue
import Vue from 'vue';
//register component
Vue.component('yourComponentName',require('./components/yourComponentName.vue').default);
//initialize vue
const app = new Vue({
el: '#app',
});
라라벨과 관련이 없는 동일한 이슈를 가진 사람을 위해서.
힌트: Vue 3+ 사용
구성 요소를 전체적으로 등록:
const MyComponent = {
// ... options ...
}
// if you do not have App component
Vue.createApp({}).component("my-component", MyComponent).mount("#app");
// if you have an App component
const App = {
// ... options ...
}
const app = Vue.createApp(App);
app.component("my-component", MyComponent);
app.mount("#app");
자세한 내용은 설명서를 참조하십시오.
1
패키지를 변경하십시오.json
"laravel-elixir-vue-2": "^0.3.0"
그리고 달린다
<!-- language: lang-js -->
npm install
OR
2
npm install laravel-elixir-vue-2 --save-dev
그리고 나서
gulpfile.js 이렇게 바꿔.
<!-- language: lang-js -->
var elixir = require('laravel-elixir')
require('laravel-elixir-vue-2');
CDN VUE 버전을 확인하십시오. VUE 2에서 VUE 3으로 변경됨.
이 장면은 여기서 일어났고, 우리는 Vue 2를 사용하고 있었고 우리의 CDN은 글로벌 스크립트를 Vue 3으로 바꾸었다.
Vue 3은 "Vue.component"를 "Vue.directive"로 변경하여 우리의 애플리케이션을 중단시켰다.
window.Vue = require('vue').default;
const app = new Vue({
el: '#app',
});
<body>
<div id="app">.....</div>`
</body>
VUE.JS CDN은 글로벌 스크립트를 [Vue.component] 더 이상 지원되지 않는 Vue 3으로 변경했다.
Vue 버전 2.6.14를 사용하십시오. 이 기능은 (구형 앱) https://v2.vuejs.org/v2/
이것만 덧붙이다
/*import Vue from 'vue/dist/vue'*/ before
/*require('./bootstrap');*/
require('./bootstrap');
import Vue from 'vue/dist/vue'
window.Vue = require('vue');
Vue.component('mainapp', require('./component/mainapp.vue').default);
const app = new Vue({
el:"#app",
});
참조URL: https://stackoverflow.com/questions/42520992/uncaught-typeerror-vue-component-is-not-a-function
'programing' 카테고리의 다른 글
| PersistentObjectException: JPA 및 최대 절전 모드에서 해제된 독립된 엔티티가 지속되도록 전달됨 (0) | 2022.04.18 |
|---|---|
| Vuex-test-utils를 사용하여 구성 요소의 VueX 상태 변경을 테스트하는 방법 (0) | 2022.04.18 |
| CRC32 C 또는 C++ 구현 (0) | 2022.04.17 |
| 목록을 명시적으로 반복하지 않고 목록을 쉼표로 구분된 문자열로 변환하는 방법 (0) | 2022.04.17 |
| excellent_text는 어떻게 작동하는가? (0) | 2022.04.17 |