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: {
    }
})

和我的components文件夹与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';。

Answer 2

您需要导入Vue文件。因此，您需要将组件保存到components/Dashboard/Dashboard.vue并导入它，如下所示：

import Dashboard from './components/Dashboard/Dashboard.vue'

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

请勿忘记./文件夹前面的components才能使其正常工作