除了@thanksd回答:
从vue-loader v15开始,需要一个插件:
// webpack.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ // ... other rules { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // make sure to include the plugin! new VueLoaderPlugin() ] }
https://vue-loader.vuejs.org/guide/
首先,您没有正确导入文件。您应该像这样导入它:
import Hello from './hello.vue'
其次,导入组件后,您仍需要以某种方式注册它。要么在全球范围内这样做 Vue.component('hello', Hello) ,或在Vue实例上:
Vue.component('hello', Hello)
new Vue({ el: '#app', template:`<div><hello></hello></div>`, components: { 'hello': Hello }, created: function () { console.log("Hey, a vue app!") } })
作为旁注,如果您希望能够导入文件而无需指定 .vue 扩展名,你可以指定 .vue 应在配置文件中解析扩展名。
.vue
在那种情况下, resolve 配置文件中的对象应如下所示:
resolve
resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['.js', '.vue', '.json'] }
这是关于的文档 resolve.extensions 。
resolve.extensions
在这里标记更多信息以及@lukebearden和@thanksd。从头开始设置一个Vue应用程序,它是基本的,我在这个过程中撕掉了一些样式,因为我不想处理它:但是它编译了JS:
https://github.com/ed42311/gu-vue-app
可以确认插件,我还没有添加决心,但现在我会:)
如果您有任何想法,请告诉我。