Webpack 和 Vue.js：未定义模板或渲染函数

Question

我正在尝试在我的根 Vue 实例中加载一个组件，但我收到了上述错误。这是 main.js 文件：

"use strict";
require('./../shared/bootstrap');  // loads jquery, moment, lodash, bootstrap-sass
import './../../shared/main.scss';

import Vue from 'vue';
window.Vue = Vue;

Vue.component('my-component', require('./components/MyComponent.vue'));

window.app = new Vue({
    el : '#app',
    data : {
        message : 'Hello',
    }
});

这里是 MyComponent.vue：

<template>
    <p>I'm the component.</p>
</template>

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

这里是 HTML：

<div id="app">
    {{ message }}
    <my-component></my-component>
</div>

我怀疑问题可能出在我的 webpack 配置中，所以这里是（相关部分...）：

module.exports = {
    entry: {
        main : './resources/assets/js/main.js',
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // runtime + compiler version
        }
    },
    module: {
        rules : [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude: /bower_components/,
                options: {
                    js: {
                        loader: 'babel-loader'
                    }
                }
            }
        ]
    },
    plugins: [ ],
    output: {
        path: path.resolve(__dirname, 'public/dist'),
        filename: 'js/[name].js'
    }
};

非常感谢您的帮助。

Answer 1

问题出在 main.js 文件上。而不是这一行：

Vue.component('my-component', require('./components/MyComponent.vue'));

我需要使用这个：

import MyComponent from './components/MyComponent.vue';
Vue.component('my-component', MyComponent);