时间戳

首页 > 解决方案 > window.Vue.use 不是函数

javascript - window.Vue.use 不是函数

问题描述

我在跑步Laravel 6.20.24，，，，，，，Laravel Mix v6.0.18_ npm 7.11.2_node v15.14.0WSL2 Ubuntu 20.04.1 LTS"vue": "^2.6.12",

存档：resources\assets\js\laravel\customer\index.js 我有这个代码

require("../bootstrap");
window.Vue = require("vue");

Vue.component(
    "intro-component",
    require("./components/IntroComponent.vue").default
);

在：resources\views\customer\welcome.blade.php

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Sample</title>
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>
    <body>
        <div id="app">
            <intro-component
                :roles="{{ $roles }}"
                :industries="{{ json_encode($industries) }}"
                :legal_roles="{{ $legal_roles }}"
                redirect-after-save="{{ $setting_url }}">
            </intro-component>
        </div>
    </body>
    <script src="{{ mix('js/customer/index.js') }}"></script>
</html>

上webpack.mix.js .js( "resources/assets/js/laravel/customer/index.js", "public/js/customer/index.js" ).vue()

但是当我访问本地站点时，我得到了这个

index.js?id=c8e33ecef5d0f3eb23d6:66723 Uncaught TypeError: window.Vue.use is not a function
    at Module../node_modules/vue-screen/dist/vue-screen.esm.js (index.js?id=c8e33ecef5d0f3eb23d6:66723)
    at __webpack_require__ (index.js?id=c8e33ecef5d0f3eb23d6:78757)
    at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/assets/js/laravel/customer/components/IntroComponent.vue?vue&type=script&lang=js& (index.js?id=c8e33ecef5d0f3eb23d6:1853)
    at __webpack_require__ (index.js?id=c8e33ecef5d0f3eb23d6:78757)
    at Module../resources/assets/js/laravel/customer/components/IntroComponent.vue?vue&type=script&lang=js& (index.js?id=c8e33ecef5d0f3eb23d6:65300)
    at __webpack_require__ (index.js?id=c8e33ecef5d0f3eb23d6:78757)
    at Module../resources/assets/js/laravel/customer/components/IntroComponent.vue (index.js?id=c8e33ecef5d0f3eb23d6:65262)
    at __webpack_require__ (index.js?id=c8e33ecef5d0f3eb23d6:78757)
    at Object../resources/assets/js/laravel/customer/index.js (index.js?id=c8e33ecef5d0f3eb23d6:2301)
    at __webpack_require__ (index.js?id=c8e33ecef5d0f3eb23d6:78757)

它window.Vue.use is not a function在编译文件上说。

这有什么问题？

标签： javascriptphplaravelvue.js

解决方案

问题出在您的 index.js （主文件）中。该文件应如下所示

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(Vuex)
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)


new Vue({
    router,
    store
    render: h => h(App)
}).$mount('#app')

推荐阅读