webpack 未编译 Vue.js 组件答案

【问题标题】：A Vue.js component is not being compiled by webpackwebpack 未编译 Vue.js 组件
【发布时间】：2018-03-02 18:59:43
【问题描述】：

因此，我已经尝试了数周来编译自定义组件，但它无法正常工作。我知道它没有编译，因为当我检查编译的 Vue 文件时，我搜索添加的自定义元素。它不会出现在已编译的 JavaScript 中。

有趣的是 ExampleComponent.vue 文件被编译了。但是，每次我尝试添加自定义 Vue 组件文件时，我的 JavaScript 控制台都会告诉我自定义元素未定义。就像我说的，我搜索了我编译的 JS 文件，当我搜索自定义元素的名称时，我什么也没看到。

我尝试了几种方法来导入 vue 文件，但它仍然无法编译。我不知道我做错了。

这是我的 ChatMessage.vue 文件

    <template>
    <div class="container">
    <P>I'm an example message</P>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

这是我的 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-component', require('./components/ExampleComponent.vue'));
Vue.component('chat-message', require('./components/ChatMessage.vue'));


const app = new Vue({
    el: '#app'
});

这是我的看法

<html>
<head>
    <title>Title goes here</title>
    <link rel="stylesheet" href="css/stylesheet.css" />

</head>
<body>

<div id="app">
    <h1>Chatroom</h1>
    <example-component>

    </example-component>

    <chat-message><</chat-message>

</div>
<script src="js/app.js"></script>
</body>
</html>

编辑：

这是我的 webpack.mix.js 文件：

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 */

mix.js('resources/assets/js/app.js', '/public/js/app.js')
   .sass('resources/assets/scss/stylesheet.scss', '/public/css');

// Full API
// mix.js(src, output);
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.less(src, output);
// mix.combine(files, destination);
// mix.copy(from, to);
// mix.minify(file);
// mix.sourceMaps(); // Enable sourcemaps
// mix.version(); // Enable versioning.
// mix.disableNotifications();
// mix.setPublicPath('path/to/public'); <-- Useful for Node apps.
// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.

【问题讨论】：

这里：<chat-message><</chat-message> 你有两个字符：<<
您是如何创建此应用程序的？你用vue-cli了吗？
你如何编译 .vue 文件——webpack 或 gulp 之类的？
我尝试了你的建议并删除了额外的
你说输出js文件中只编译了一个组件——那有什么区别呢？如果你切换组件的顺序呢？

标签： javascript laravel-5 vue.js

【解决方案1】：

你应该使用带有 mix 的 vue 编译器。

尝试将 .vue() 放在你的 Mix 中

    mix.js('resources/assets/js/app.js', '/public/js/app.js')
       .sass('resources/assets/scss/stylesheet.scss', '/public/css').vue();

【讨论】：