未捕获的 TypeError：Vue.component 不是函数
Posted
技术标签:
【中文标题】未捕获的 TypeError：Vue.component 不是函数【英文标题】：Uncaught TypeError: Vue.component is not a function 【发布时间】：2017-07-20 03:31:07 【问题描述】：在带有 Laravel/Homestead 的 OS X 中，我在使用 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>
上传.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 elixir webpack 官方在这里给你问题github.com/vuejs/laravel-elixir-vue-2/issues/20。 laravel mix 是更好的选择。 【参考方案1】：在 laravel 7 项目上从 laravel-mix 5.0.9 更新到 laravel-mix 6.0.11 后，它开始在 vue 编译视图上看到此错误。我改调用Vue包：
使用
import Vue from 'vue'而不是window.Vue = require("vue");为我工作。
【讨论】：
确定解决了我的问题，它是Vue.use is not a function。
也解决了我的问题。谢谢！
也解决了 Vue.use.component is not a function 你还需要把你所有的Vue.default.XXXX改成Vue.XXXX
我使用或多或少相同的配置，这在 Laravel 8 和 Vue 2.6 中也适用于我。感谢您提供宝贵的信息。【参考方案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',
);
【讨论】：
我没有使用 Elixer，所以这对我有用，谢谢！【参考方案3】：对于任何有相同问题且与 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
【讨论】：
【参考方案4】：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');
【讨论】：
感谢您的回复。更新到 Vue 2 后，下一个控制台错误是“[Vue 警告]：不要将 Vue 挂载到 或 - 改为挂载到普通元素。”我只是将组件包装在 中，重新运行 Gulp，一切都运行良好。非常感谢！ 【参考方案5】：检查您的 CDN VUE 版本。他们从 Vue 2 更改为 Vue 3。
这个场景发生在这里，我们使用的是 Vue 2，我们的 CDN 将全局脚本更改为 Vue 3。
Vue 3 将“Vue.component”更改为“Vue.directive”，这破坏了我们的应用程序。
【讨论】：
【参考方案6】：window.Vue = require('vue').default;
const app = new Vue(
el: '#app',
);
<body>
<div id="app">.....</div>`
</body>
【讨论】：
【参考方案7】：VUE.JS CDN 将全局脚本更改为不再支持 [Vue.component] 的 Vue 3。
使用 Vue 版本 2.6.14，这对我有用（旧应用程序） https://v2.vuejs.org/v2/
【讨论】：
【参考方案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",
);
【讨论】：
以上是关于未捕获的 TypeError：Vue.component 不是函数的主要内容，如果未能解决你的问题，请参考以下文章
VueJS：未捕获（承诺中）TypeError：无法读取未定义的属性“推送”
未捕获的TypeError：（中间值）.map不是函数[重复]
如何使用自定义错误消息捕获“TypeError：无法读取未定义的属性（读取'0'）”？
未捕获（承诺）TypeError：无法读取未定义的属性“长度”