在带有 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 ofwindow.Vue = require("vue");
worked for me.
关于javascript - Uncaught TypeError : Vue. 组件不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42520992/