Webpack 无法解析模块错误

Question

所以我正在尝试编译一个 vue 文件。但是我收到以下错误

我也不知道为什么。我的 main.js 文件包含以下内容

// Vue things
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)


// Vue Components
import dashboard from 'components/dashboard-component'

new Vue({
    el: "body",
    components: {
        dashboard
    },
    methods: {
    }
})

我的组件文件夹与 main.js 位于同一文件夹中。这是我的 vue 组件:

<template>
Hello
</template>

<script>
// Exports
export default {
    components: {
        dashboard
    },
    props: {
    },
    data: function (argument) {
    },
    ready() {
    },
    methods: {
    }
}
</script>

在 components/dashboard-component 下作为 index.vue。

我做错了什么？

谢谢。

Answer 1

为了方便起见，我通常会在解析的扩展数组中添加.vue，并为经常使用的目录设置别名:

resolve: {
  extensions: ['', '.js', '.vue'],
  fallback: [path.join(__dirname, '../node_modules')],
  alias: {
    'data': path.resolve(__dirname, '../data'),
    'src': path.resolve(__dirname, '../src'),
    'assets': path.resolve(__dirname, '../src/assets'),
    'views': path.resolve(__dirname, '../src/views'),
    'components': path.resolve(__dirname, '../src/components')
  }
},

所以我可以在我的项目中使用import dashboard from 'components/dashboard-component';。