Vue 路线：未捕获的类型错误：window.Vue.use 不是函数

Question

Vue 路线：未捕获的类型错误：window.Vue.use 不是函数

在我的 Laravel 项目中，我正在使用 Vue 库，并且我正在尝试在我的模块中使用 vue 路由器，但是当我像往常一样尝试导入 vue 路由器时（请参阅下面的代码），我的控制台中出现错误：未捕获的类型错误：窗口。 Vue.use 不是一个函数

任何想法如何解决这个问题？我已经使用 webpack 创建了这个模块。

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)
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

mav*_*ava 14

我认为这是在 laravel 中加载/导入 Vue 的问题。
您是否尝试将其更改为以下内容：

import Vue from 'vue/dist/vue'

window.Vue = Vue
Vue.use(VueRouter)

Run Code Online (Sandbox Code Playgroud)

您可以尝试console.log(window.Vue)查看 Vue 是否正确附加，或者是否window.Vue未定义。您也可以尝试console.log(Vue)查看导入的内容。

感谢您的建议，但我尝试了这个方法，但没有成功。 (2认同)

Answer 2

use*_*867 2

不确定，但可能是我的疏忽造成的。

问题出在页面加载时的 JS 文件顺序中。仍然不确定为什么会发生这种情况。我尝试在标记之前使用生成的 JS 文件，但这不起作用，所以我只是将 JS 文件放在 Vue 模板容器之后，它就开始工作（检查下面的代码片段）。如果有人对此有任何解释，我会很高兴听到，因为现在我可以称其为“魔法”。

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年前
查看次数：	9188 次
最近记录：	7 年前