未捕获的类型错误：Vue.component 不是 function
[英]Uncaught TypeError: Vue.component is not a function
问题描述
In OS X with Laravel/Homestead, I'm getting an error using Vue (v2.2.1).
在带有 Laravel/Homestead 的 OS X 中，我在使用 Vue (v2.2.1) 时遇到错误。 The component won't load and the console error is "Uncaught TypeError: Vue.component is not a function".该组件不会加载，控制台错误是“未捕获的类型错误：Vue.component 不是一个函数”。
Full console error完整的控制台错误
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
What is throwing me off is that if I make a change to app.js, the webpack does not update to reflect any changes.让我失望的是，如果我对 app.js 进行更改，webpack 不会更新以反映任何更改。 So I need to A) fix the issue above, and B) figure out how to get the webpack to show updates in the console.所以我需要 A) 解决上面的问题，以及 B) 弄清楚如何让 webpack 在控制台中显示更新。
Any help would be greatly appreciated.任何帮助将不胜感激。 I'm a noob.我是菜鸟。 Here is my code...这是我的代码...
app.js file应用程序.js 文件
Vue.component('video-upload', require('./components/VideoUpload.vue'));
const app = new Vue({
el: 'body'
});
VideoUpload.vue视频上传.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上传.blade.php
@extends('layouts.app')
@section('content')
<video-upload></video-upload>
@endsection
package.json 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"
}
}
8 个解决方案
解决方案1
22 2021-02-20 19:53:24
After an update from laravel-mix 5.0.9 to laravel-mix 6.0.11 on a laravel 7 project it started to see this error on vue compiled views.在 laravel 7 项目上从laravel-mix 5.0.9更新到laravel-mix 6.0.11 ，它开始在 vue 编译视图上看到此错误。 I change the call the Vue package:我改变调用Vue包：
Use
import Vue from 'vue'instead ofwindow.Vue = require("vue");import Vue from 'vue'而不是window.Vue = require("vue");worked for me.
解决方案2
11 2021-01-19 19:20:43
import vue properly in your code using import keyword like this:使用 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',
});
解决方案3
4 已采纳 2017-03-03 11:07:02
1 1
Change your package.json更改您的package.json
"laravel-elixir-vue-2": "^0.3.0"
And run并运行
<!-- language: lang-js -->
npm install
OR或者
2 2
npm install laravel-elixir-vue-2 --save-dev
And then然后
Change your gulpfile.js like this像这样改变你的 gulpfile.js
<!-- language: lang-js -->
var elixir = require('laravel-elixir')
require('laravel-elixir-vue-2');
解决方案4
4 2022-02-08 17:03:18
CHECK YOUR CDN VUE VERSION.检查您的 CDN VUE 版本。 THEY CHANGED FROM VUE 2 TO VUE 3.他们从 VUE 2 更改为 VUE 3。
This scenarion happened here, we were using Vue 2 and our CDN changed the global script to Vue 3.这个场景发生在这里，我们使用的是 Vue 2，我们的 CDN 将全局脚本更改为 Vue 3。
Vue 3 changed the "Vue.component" to "Vue.directive" which broke our application. Vue 3 将“Vue.component”更改为“Vue.directive”，这破坏了我们的应用程序。
解决方案5
4 2022-02-18 04:25:33
VUE.JS CDN changed the global script to Vue 3 which is not supported [Vue.component] any more. VUE.JS CDN 将全局脚本更改为不再支持 [Vue.component] 的 Vue 3。
Use Vue Version 2.6.14, this works for me (older apps) https://v2.vuejs.org/v2/使用 Vue 版本 2.6.14，这对我有用（较旧的应用程序） https://v2.vuejs.org/v2/
解决方案6
2 2021-08-04 17:22:15
window.Vue = require('vue').default;
const app = new Vue({
el: '#app',
});
<body>
<div id="app">.....</div>`
</body>
解决方案7
1 2021-06-25 13:12:52
For any one who has the same issue and is not related to Laravel.对于任何有相同问题且与 Laravel 无关的人。
Hint: using Vue 3+提示：使用 Vue 3+
Register the component globally:全局注册组件：
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");
Please refer to Documentation for more info请参阅文档了解更多信息
解决方案8
0 2022-02-24 16:17:24
just add this只需添加这个
/*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",
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.