找不到模块：错误：无法解析'./app/index.vue'vue.js组件导入ES6

我仍在练习使用带有vue js和babel的webpack2，但碰到这个错误。我不知道错过了什么。找不到模块：错误：无法解析'./app/index.vue'vue.js组件导入ES6

ERROR in ./src/main.js 
Module not found: Error: Can't resolve './app/index.vue' in 'E:\xampp\htdocs\webpack-practice\src' 
@ ./src/main.js 3:0-43

似乎错误是从线路来我这里尝试

//file src\main.js 
import Vue from 'vue' 

import AppComponent from './app/index.vue' 

const vm = new Vue({ 
el: '#app', 
components: { 
    app: AppComponent, 
}, 
render: h => h('app'), 
})

进口VUE组件，这是我的配置文件

//file webpack.config.js 
var webpack = require('webpack'); 
module.exports = { 
entry: './src/main', 
output: { 
    path: './build', 
    filename: 'main.js', 
}, 
module: { 
    rules: [ 
    { 
     test: /\.vue$/, 
     use: { 
      loader: 'vue'    
     } 
    }, 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
    } 
    ] 
}, 
plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
     vue: { 
      loader: { 
       js: 'babel-loader' 
      } 
     } 
    }) 
] 
}

我敢肯定的导入路径是有效的，这是我的文件夹结构。并且已经在文件夹名称之前放置了./前缀。

root 
|----index.html 
|----webpack.config.js 
|----app 
|  |----index.vue 
|  |----some file 
| 
|----build 
|  |----main.js 
| 
|----node_modules 
| 
|----src 
     |----main.js

我在这里错过了什么？请帮助，我使用的是Windows 10，如果这件事。

来源

2017-03-16 sugai_sama

在这种情况下，您可以回答自己的问题，以确保具有类似问题的人可以使用问题和答案来解决它们 – klashar

请回滚编辑到您的问题，并[作为答案张贴解决方案]（ http://stackoverflow.com/help/self-answer） – Bergi

完成。我希望我做得很好 –

我已经解决了我的问题，因为它似乎我不能删除答案。我会编辑我如何解决问题。

改变这部分

import AppComponent from './app/index.vue'

到

import AppComponent from '../app/index.vue'

我觉得羞愧错过这样那样的错误。

和改变VUE装载机之后的下一个错误是出现

loader: 'vue'

改为

loader: 'vue-loader'

然后安装其他需要由终端建议的依赖关系。

来源

2017-03-17 07:37:08

这个问题解决很简单，有它很多的解决方案，我会提出了两种：

安装/重装VUE模板编译和VUE装载机NPM包。
如果第一个解决方案不起作用，这意味着你有很多损坏或配置不当的npm软件包，因此运行npm install，以便它提供有关应该安装但不能安装的所有软件包的警告，然后安装这些软件包并运行npm install以查看如果一切正常，如果不再安装丢失/破损的软件包，请重复该过程，直到安装了所有必需的软件包。

来源

2017-09-23 19:55:32

找不到模块：错误：无法解析'./app/index.vue'vue.js组件导入ES6

回答

相关问题