Uncaught TypeError: Vue.component не является функцией

В OS X с Laravel / Homestead я получаю сообщение об ошибке при использовании 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, веб-пакет не обновится, чтобы отразить какие-либо изменения. Поэтому мне нужно А) исправить проблему, указанную выше, и Б) выяснить, как заставить веб-пакет отображать обновления в консоли.

Любая помощь будет принята с благодарностью! Я новичок. Вот мой код ...

файл app.js

    Vue.component('video-upload', require('./components/VideoUpload.vue'));

    const app = new Vue({
        el: 'body'
    });

VideoUpload.vue

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

upload.blade.php

    @extends('layouts.app')

    @section('content')
        <video-upload></video-upload>
    @endsection

package.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"
      }
    }

javascript laravel vuejs2 console.log homestead
person Stephen Pappas    schedule 01.03.2017    source источник
comment
с вашим кодом все в порядке. Итак, я думаю, что официальный веб-пакет laravel elixir дает вам проблему здесь github.com / vuejs / laravel-elixir-vue-2 / issues / 20. laravel mix - лучший вариант.   -  person ishadif    schedule 01.03.2017

Ответы (4)


arrow_upward
4
arrow_downward

1

Измените свой package.json

"laravel-elixir-vue-2": "^0.3.0"

И беги

<!-- language: lang-js -->
npm install

ИЛИ

2

npm install laravel-elixir-vue-2 --save-dev

А потом

Измените свой gulpfile.js вот так

<!-- language: lang-js -->
var elixir = require('laravel-elixir')

require('laravel-elixir-vue-2');
person LaraFlow    schedule 03.03.2017
comment
Спасибо за ответ. После обновления до Vue 2 следующая ошибка консоли была [Предупреждение Vue]: не монтируйте Vue на ‹html› или ‹body› - вместо этого монтируйте к обычным элементам. Я просто обернул компонент в ‹div›, повторно запустил Gulp, и все работает прекрасно. Очень признателен! - person Stephen Pappas; 04.03.2017

arrow_upward
23
arrow_downward

После обновления с laravel-mix 5.0.9 до laravel-mix 6.0.11 в проекте laravel 7 эта ошибка начала появляться в скомпилированных представлениях vue. Меняю вызов пакета Vue:

Использование import Vue from 'vue' вместо window.Vue = require("vue"); у меня сработало.

person Fernando Gonzalez    schedule 20.02.2021
comment
Конечно, моя проблема решена, это было Vue.use is not a function. - person reppair; 21.03.2021
comment
Решил и мою проблему. Спасибо! - person SvEnjoyPro; 11.04.2021

arrow_upward
11
arrow_downward

правильно импортируйте vue в свой код, используя ключевое слово import, например:

//import vue
import Vue from 'vue';

//register component
Vue.component('yourComponentName',require('./components/yourComponentName.vue').default);

//initialize vue
const app = new Vue({
    el: '#app',
});
person Qasim Nadeem    schedule 19.01.2021
comment
Я не использовал Elixer, поэтому у меня это сработало, спасибо! - person Tomjesch; 27.01.2021

arrow_upward
1
arrow_downward

Для всех, кто имеет такую ​​же проблему и не связан с Laravel.

Подсказка: используйте 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");

Дополнительную информацию см. В документации.

person Safwat Fathi    schedule 25.06.2021