javascript - Uncaught TypeError : Vue. 组件不是函数

标签 javascript laravel vuejs2 homestead console.log

在带有 Laravel/Homestead 的 OS X 中,我在使用 Vue (v2.2.1) 时遇到错误。该组件不会加载,控制台错误是“未捕获的类型错误: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 进行更改,webpack 不会更新以反射(reflect)任何更改。所以我需要 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"
      }
    }

最佳答案

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

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

关于javascript - Uncaught TypeError : Vue. 组件不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42520992/

相关文章:

vue.js - VueJS 2.0 - 无法在 Prop 更新上 Hook 组件

vue.js - 使用 axios 获取 ERR_CERT_AUTHORITY_INVALID

javascript - 有没有办法仅使用半正弦公式来过滤州/省/市/区内的坐标?

javascript - 在asp.net中调用javascript返回值到代码页

php - 在 Laravel 中删除包含文件的文件夹

mysql - 我正在尝试让 Eloquent 急切加载工作,但它一直在 hasMany 表中寻找不正确的列名

php - Laravel 中的单 session 登录

c# - 将文件写入 HttpResponse,浏览器不提示保存

javascript - 验证逗号分隔的电子邮件列表

javascript - Vue路由器从默认 View 返回时清除历史记录API?