Question

将Vue从v1.0.26更新为v2.4.4后，我收到了错误消息：

window.Vue.use is not a function

这是我的条目js bootstrap.js：

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

//window.$ = window.jQuery = require('jquery');
require('bootstrap');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;

    next();
});

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

app.js：

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
require('./slider');
require('./search-form');
require('./scroll-spy');
require('./smooth-scroll');
require('./autocomplete');

var VueResource = require('vue-resource');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

Vue.component('video-player', require('./components/VideoPlayer.vue'));
Vue.component('videos', require('./components/Videos.vue'));
Vue.component('single-video', require('./components/Video.vue'));
Vue.component('players', require('./components/Players.vue'));
Vue.component('pages', require('./components/Pages.vue'));
Vue.component('videos-counter', require('./components/VideosCounter.vue'));
Vue.component('players-counter', require('./components/PlayersCounter.vue'));

Vue.component('player', require('./components/Player.vue'));
Vue.component('player-card', require('./components/PlayerCard.vue'));
Vue.component('player-info', require('./components/PlayerInfo.vue'));
Vue.component('player-stats', require('./components/PlayerStats.vue'));
Vue.component('player-videos', require('./components/PlayerVideos.vue'));
Vue.component('masked-input', require('./components/MaskedInput.vue'));

Vue.use(VueResource);

const app = new Vue({
    el: 'body',
    data: window.videoApp
});

我试图四处寻找，但无法找到任何相关内容，我该如何解决？

这是webpack.config.js：

{
    module: {
        noParse: [
            /node_modules[\\/]video\.js/
        ]
    }
}

我运行gulpfile来构建任务：

const elixir = require('laravel-elixir');

require('laravel-elixir-vue');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    mix.copy('resources/assets/js', 'public/js');
    //mix.copy('resources/assets/css', 'public/css');

    mix.sass('app.scss')
       .sass('admin.scss', 'public/css/admin.css')
       .sass('new-app.scss', 'public/css/new-app.css')
       .webpack('app.js')
       .webpack('admin.js')
});

Answer 1

为webpack.config.js尝试此配置。

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}

https://github.com/vuejs-templates/webpack/issues/215#issuecomment-238095102

（感谢@ yyx990803！）

或者...... console.log(Vue)的结果是什么？

我认为这将是{default: function Vue()...} （您可以更改导入Vue库的方式，或添加.default 但是这种解决方法不起作用。）

更新Vue会给出一个错误窗口.Vue.use不是一个函数

1 个答案: