Vue 路由：未捕获类型错误：window.Vue.use 不是函数答案

【问题标题】：Vue route: Uncaught TypeError: window.Vue.use is not a functionVue 路由：未捕获类型错误：window.Vue.use 不是函数
【发布时间】：2019-05-17 08:26:37
【问题描述】：

在我的 Laravel 项目中，我正在使用 Vue 库，并且我正在尝试在我的模块中使用 vue 路由器，但是当我像往常一样尝试导入 vue 路由器时（参见下面的代码）我得到了一个我的控制台中出现错误：Uncaught TypeError: window.Vue.use is not a function

任何想法如何解决这个问题？我使用 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)
});

【问题讨论】：

您的代码似乎有效

标签： vue.js webpack vuejs2

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

import Vue from 'vue/dist/vue'

window.Vue = Vue
Vue.use(VueRouter)

您可以尝试 console.log(window.Vue) 来查看 Vue 是否正确连接，或者 window.Vue 是否未定义。你也可以试试console.log(Vue) 看看导入了什么。

【讨论】：

感谢您的建议，但我试过了，但没有成功。
如果你 console.log 两个 Import Types 的输出是什么？
这让 5 月 25 日成为庆祝的好日子
试过了，它确实有效:) 我正在更新我所有的 npm 依赖项，在某些情况下是主要版本更改，例如 Mix 5 到 Mix 6。