Javascript 找不到模块：错误：无法解析 './app/index.vue' vue.js 组件导入 ES6
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42828484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Module not found: Error: Can't resolve './app/index.vue' vue.js component import ES6
提问by tesarwijaya
i am still practicing to use webpack2 with vue js and babel but bumped to this error. i don't know what exactly is missing.
我仍在练习将 webpack2 与 vue js 和 babel 一起使用，但遇到了这个错误。我不知道到底缺少什么。
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
it seems the error is coming from the line i try to import vue component here
似乎错误来自我尝试在此处导入 vue 组件的行
//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'),
})
this is my config file
这是我的配置文件
//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'
}
}
})
]
}
i'm pretty sure the import path is valid, here is my folder structure. and already put ./ prefix before the folder name.
我很确定导入路径是有效的，这是我的文件夹结构。并且已经将 ./ 前缀放在文件夹名称之前。
root
|----index.html
|----webpack.config.js
|----app
| |----index.vue
| |----some file
|
|----build
| |----main.js
|
|----node_modules
|
|----src
|----main.js
what am i missing here? please help, i'm using windows 10 if it's matter.
我在这里错过了什么？请帮忙，如果有问题，我正在使用 Windows 10。
回答by tesarwijaya
i have solved my problem, since it seems i can't delete the answer. i'll edit how i solve the problem.
我已经解决了我的问题，因为我似乎无法删除答案。我将编辑我如何解决问题。
change this part
改变这部分
import AppComponent from './app/index.vue'
to
到
import AppComponent from '../app/index.vue'
i feel ashame to miss this kind of error.
我为错过这种错误而感到羞耻。
and change the vue loader after the next error is appear
并在出现下一个错误后更改 vue 加载程序
loader: 'vue'
changed to
变成
loader: 'vue-loader'
then install others needed dependencies suggested by the terminal.
然后安装终端建议的其他需要的依赖项。
回答by Manideep
your code :
你的代码：
import AppComponent from './app/index.vue'
convert to :
转换成 ：
import AppComponent from '../app/ index.vue'
OR
或者
import AppComponent from '@/app/ index'
After run:
运行后：
npm run dev
回答by Billal Begueradj
I do not know which version you are using, but the following attempts should work -all of them, under the assumption you export Index.vuewith name: AppComponent:
我不知道你使用的是哪个版本，但以下应试图解决它们的-all，导出的假设下Index.vue有name: AppComponent：
import AppComponent from './app/index'
import AppComponent from '~/app/index'
import AppComponent from '@/app/index'
回答by Jordao Manguena
This problem is very simple to solve and there are many solutions to it, i am going to present two:
这个问题很容易解决，有很多解决方案，我将介绍两个：
- install/ reinstall vue-template-compiler and vue-loader npm packages.
- if the first solution does not work it means you have many broken or misconfigured npm packages, so run
npm installso that it provides warning about all packages that should be installed but could not be, then install these packages and runnpm installto see if everything is okay, if not install again the missing/broken packages, repeat the process until all the necessary packages are intalled.
- 安装/重新安装 vue-template-compiler 和 vue-loader npm 包。
- 如果第一个解决方案不起作用，则意味着您有许多损坏或配置错误的 npm 包，因此请运行
npm install它以提供有关所有应安装但无法安装的包的警告，然后安装这些包并运行npm install以查看是否一切正常，如果不再安装丢失/损坏的软件包，请重复该过程，直到安装所有必需的软件包。
