Uncaught TypeError: Vue.component is not a function

Question

在 OS X 和 Laravel/Homestead 中，我在使用 Vue (v2.2.1) 时遇到错误。该组件不会加载，控制台错误为 "Uncaught TypeError: Vue.component is not a function"。

完整控制台错误

    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 进行更改，webpack 不会更新以反映任何更改。所以我需要 A) 解决上面的问题，以及 B) 弄清楚如何让 webpack 在控制台中显示更新。

如有任何帮助，我们将不胜感激！我是菜鸟。这是我的代码...

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

Answer 1

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

Answer 2

使用 import 关键字在您的代码中正确导入 vue，如下所示：

//import vue
import Vue from 'vue';

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

//initialize vue
const app = new Vue({
    el: '#app',
});

Answer 3

在 laravel 7 项目上从 laravel-mix 5.0.9 更新到 laravel-mix 6.0.11 后，它开始在 vue 编译视图上看到此错误。我更改调用 Vue 包：

Use import Vue from 'vue' instead of window.Vue = require("vue"); worked for me.

Answer 4

对于任何遇到相同问题但与 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");

详情请参考Documentation

Answer 5

window.Vue = require('vue').default;
const app = new Vue({
    el: '#app',
});


<body>
 <div id="app">.....</div>`
</body>

Answer 6

检查您的 CDN VUE 版本。他们从 VUE 2 更改为 VUE 3。

这个场景发生在这里，我们使用的是 Vue 2，我们的 CDN 将全局脚本更改为 Vue 3。

Vue 3 将“Vue.component”更改为“Vue.directive”，这破坏了我们的应用程序。

Answer 7

VUE.JS CDN 将全局脚本更改为不再支持 [Vue.component] 的 Vue 3。

使用 Vue 版本 2.6.14，这适用于我（较旧的应用程序） https://v2.vuejs.org/v2/

Answer 8

只需添加这个

/*import Vue from 'vue/dist/vue'*/ before
/*require('./bootstrap');*/
  
require('./bootstrap');

import Vue from 'vue/dist/vue'
window.Vue = require('vue');

Vue.component('mainapp', require('./component/mainapp.vue').default);


const app = new Vue({
  el:"#app",
});

Uncaught TypeError: Vue.component is not a function

Uncaught TypeError: Vue.component is not a function

javascript

laravel

console.log

homestead

vuejs2

1

2

然后