Как скомпилировать файлы .vue внутри Webpack Laravel - PullRequest
0 голосов
/ 27 августа 2018

Я новичок в вебпаке в Ларавеле. Мне уже удалось собрать сценарии по умолчанию в один. Однако, когда я попытался добавить новый Vue Controller в отдельную папку, кажется, он не будет включен во время запуска npm 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 --controllers --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';

Буду признателен за любую помощь.

Спасибо!

1 Ответ

0 голосов
/ 31 августа 2018

@ drake24 В некоторых средах (например, в моей) вы должны использовать:

npm run watch-poll

Это должно сработать, без добавления файлов .vue в webpack.mix.js.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...