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

【问题标题】：How to compile .vue files inside Webpack Laravel如何在 Webpack Laravel 中编译 .vue 文件
【发布时间】：2019-02-01 21:51:11
【问题描述】：

我是 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';

任何帮助将不胜感激。

谢谢！

【问题讨论】：

你不必在 laravel mix 中添加 vue 文件。 npm 会自动编译它们。
你必须在 app.js 或其他 .js 文件中导入或要求 vue 文件，它们将被编译而不添加到 webpack.mix.js 中。
您可以将app.js 和test.vue 的内容添加到您的问题中吗？
@RossWilson 添加了 app.js 和 test.vue 的代码。
@thefallen 我已经做到了。 :(

标签： laravel vue.js webpack

【解决方案1】：

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

npm run watch-poll

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

【讨论】：