我正在尝试在我的根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'
}
};
非常感谢。
答案 0 :(得分:0)
问题在于main.js文件。而不是这一行:
Vue.component('my-component', require('./components/MyComponent.vue'));
我需要使用它:
import MyComponent from './components/MyComponent.vue';
Vue.component('my-component', MyComponent);