web-dev-qa-db-ja.com

モジュールが見つかりません：エラー： './app/index.vue' vue.jsコンポーネントインポートES6を解決できません

私はまだ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を使用しています。

javascriptvue.jsbabeljswebpack-2
7
sugai_sama

答えを削除できないようですので、問題を解決しました。問題の解決方法を編集します。

この部分を変更する

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

に

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

この種のエラーを見逃すのは恥ずかしいと思います。

次のエラーが表示された後、vueローダーを変更します

loader: 'vue'

に変更されました

loader: 'vue-loader'

次に、ターミナルによって提案された他の必要な依存関係をインストールします。

9
sugai_sama

どのバージョンを使用しているのかわかりませんが、次の試みはうまくいくはずです-あなたがエクスポートするという仮定の下でIndex.vue with name: AppComponent：

import AppComponent from './app/index'
import AppComponent from '~/app/index'
import AppComponent from '@/app/index'
2
Billal Begueradj

あなたのコード：

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

に変換 ：

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

OR

import AppComponent from '@/app/ index'

実行後：

 npm run dev
2
Manideep

この問題は非常に簡単に解決でき、多くの解決策があります。次の2つを紹介します。

  1. vue-template-compilerおよびvue-loader npmパッケージをインストール/再インストールします。
  2. 最初の解決策が機能しない場合は、npmパッケージが破損または誤って構成されていることが多いため、npm installこれにより、インストールする必要があるがインストールできなかったすべてのパッケージに関する警告が表示され、これらのパッケージをインストールしてnpm installすべてが問題ないかどうかを確認し、不足している/破損したパッケージを再度インストールしない場合は、必要なパッケージがすべてインストールされるまでプロセスを繰り返します。
1
Jordao Manguena