在使用Laravel / Homestead的OS X中,我使用Vue(v2.2.1)收到错误。该组件将不会加载,并且控制台错误为“Uncaught TypeError: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不会更新以反映任何更改。所以我需要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"
}
}
答案 0 :(得分:20)
在 laravel 7 项目上从 laravel-mix 5.0.9
更新到 laravel-mix 6.0.11
后,它开始在 vue 编译视图上看到此错误。我改调用Vue包:
使用 import Vue from 'vue'
而不是 window.Vue = require("vue");
对我有用。
答案 1 :(得分:11)
使用 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',
});
答案 2 :(得分:2)
更改 package.json
"laravel-elixir-vue-2": "^0.3.0"
然后运行
<!-- language: lang-js -->
npm install
或强>
npm install laravel-elixir-vue-2 --save-dev
像这样更改你的gulpfile.js
<!-- language: lang-js -->
var elixir = require('laravel-elixir')
require('laravel-elixir-vue-2');
答案 3 :(得分:0)
对于任何有相同问题且与 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 :(得分:0)
window.Vue = require('vue').default;
const app = new Vue({
el: '#app',
});
<body>
<div id="app">.....</div>`
</body>