Question

我仍在练习使用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

似乎错误来自我尝试在此处导入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'),
})

这是我的配置文件

//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。

Answer 1

我已经解决了我的问题，因为我似乎无法删除答案。我将编辑我如何解决问题。

更改此部分

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

到

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

我很想念这种错误。

并在出现下一个错误后更改vue加载程序

loader: 'vue'

更改为

loader: 'vue-loader'

然后安装终端建议的其他所需依赖项。

Answer 2

您的代码：

bash: kill: (7732) - No such process

转换为：

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

OR

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

运行后：

import AppComponent from '@/app/ index'

Answer 3

我不知道您使用的是哪个版本，但是在您使用name: AppComponent导出 Index.vue 的假设下，以下所有尝试均应有效：

import AppComponent from './app/index'
import AppComponent from '~/app/index'
import AppComponent from '@/app/index'

Answer 4

这个问题很容易解决，有很多解决方案，我将提出两个：

安装/重新安装vue-template-compiler和vue-loader npm软件包。
如果第一个解决方案不起作用，则意味着您有许多损坏或配置错误的npm软件包，因此运行<textarea readonly>You can't edit me</textarea>以便它提供有关应安装但不能安装的所有软件包的警告，然后安装这些软件包和运行npm install以查看是否一切正常，如果不再安装丢失/损坏的软件包，请重复此过程，直到安装所有必需的软件包。

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

4 个答案: