Question

我是Laravel的webpack的新手。我已经设法将默认脚本编译为一个。但是，当我尝试在单独的文件夹中添加新的Vue控制器时，似乎在npm run dev期间将不包括该新控制器。

目前，我已经设置好了

-assets
 --js
 ---app.js
 ---test.vue

    mix.js([
        'resources/assets/js/app.js',
        'resources/assets/js/test.vue'
    ], 'public/js/app.js');

这将起作用。但是，当我将test.vue放在文件夹中时。

-资产 --js --- app.js -控制器 --test.vue

-assets
     --js
     ---app.js
     --controllers
     --test.vue
        mix.js([
            'resources/assets/js/app.js',
            'resources/assets/js/controllers/test.vue'
        ], 'public/js/app.js');

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

Test.vue

var app = new Vue({
    el: '#app',
    data: {
            message:'Fight!',
            choice:'Awaiting choice',
            images: {
                imgBlue: '',
                imgRed: ''
            },
            votes: {
                blue: null,
                red: null
            }
    },
});

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.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

任何帮助将不胜感激。

谢谢！

Answer 1

@ drake24在某些环境（例如我的环境）中，必须使用：

npm run watch-poll

这应该可以完成，而无需将.vue文件添加到webpack.mix.js中。

如何在Webpack Laravel中编译.vue文件

1 个答案: