Vue 루트:Uncaught Type Error: 창.Vue.use는 함수가 아닙니다.
Laravel 프로젝트에서 저는 Vue 라이브러리를 사용하고 있고 모듈에서 vue 라우터를 사용하려고 합니다만, 통상대로 vue 라우터를 Import하려고 했을 때(아래 코드 참조) 콘솔에 오류가 발생했습니다.Uncaught Type Error: 창.Vue.use는 함수가 아닙니다.
이 문제를 어떻게 해결할지 생각나는 게 있나요?웹 팩을 사용하여 이 모듈을 만들었습니다.
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './App.vue'
const router = new VueRouter({
routes: [{
'path' : '/user/:id/'
}]
});
new Vue({
router,
el: '#play',
render: h => h(App)
});
저는 Vue를 larabel로 로드/수입할 때 문제가 있다고 생각합니다.
다음과 같이 변경해 본 적이 있습니까?
import Vue from 'vue/dist/vue'
window.Vue = Vue
Vue.use(VueRouter)
시도해 보세요.console.log(window.Vue)Vue가 올바르게 연결되어 있는지 또는window.Vue정의되어 있지 않습니다.그런 것도 할 수 있어요.console.log(Vue)어떤 것이 Import되는지 확인합니다.
확실하진 않지만, 아마 제 부주의 탓일 거예요.
페이지 로드 중 JS 파일 순서로 문제가 발생하였습니다.왜 이런 일이 일어났는지 아직도 모르겠어.태그 전에 생성된 JS파일을 사용하려고 했는데, 이것이 동작하지 않아서 Vue 템플릿 컨테이너 바로 뒤에 JS파일을 넣었더니 동작하기 시작했습니다(아래 스니펫 확인).만약 누군가가 그것에 대해 설명해 준다면, 나는 그것을 기꺼이 들을 것이다. 왜냐하면 나는 이제 그것을 "매직"이라고 부를 수 있기 때문이다.
<body>
@yield('after_body_open')
{{--Header--}}
<header>
@include('layouts.top-bar')
@include('layouts.header')
</header>
{{--Page content--}}
<main>
@yield('content')
</main>
<div id="play"></div>{{--Vue instance--}}
<script src="{{ asset('js/vue/play.js') }}"></script> **TO HERE**
{{--Footer--}}
<footer></footer>
{{--Notifications block--}}
<div id="notifications"></div>{{--Vue instance--}}
{{--Required JS files--}}
<script src="{{ asset('js/vue/navigation.js') }}"></script>
<script src="{{ asset('js/vue/notifications.js') }}"></script>
<script src="{{ asset('js/vue/play.js') }}"></script> **FROM HERE**
@yield('before_body_close')
</body>
언급URL : https://stackoverflow.com/questions/53807292/vue-route-uncaught-typeerror-window-vue-use-is-not-a-function
'programing' 카테고리의 다른 글
| 어레이가 늘인지 비어 있는지 확인하려면 어떻게 해야 합니까? (0) | 2022.08.11 |
|---|---|
| 자바에서 지연하려면 어떻게 해야 하나요? (0) | 2022.07.18 |
| vue-resize-direction이 실행되지 않는 이유는 무엇입니까? (0) | 2022.07.18 |
| vue.js: nextTick은 데이터 변경 후 돔 렌더링을 완료하려면 어떻게 해야 합니까? (0) | 2022.07.18 |
| vue.js에서 Jquery 이벤트를 포착하는 방법 (0) | 2022.07.18 |