Question

所以我现在已经尝试了几个星期来获得一个自定义组件进行编译，但它无法正常工作。我知道它没有编译，因为当我检查编译的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.

Webpack

0 个答案: