web-dev-qa-db-fra.com

Module introuvable: erreur: impossible de résoudre l'importation de composant vue.js './app/index.vue' vue ES6

je continue à utiliser webpack2 avec vue js et babel, mais je suis tombé sur cette erreur. Je ne sais pas ce qui manque exactement.

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

il semble que l'erreur vienne de la ligne, j'essaie d'importer le composant vue ici

//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'),
})

c'est mon fichier de configuration

//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'
            }
        }
    })
]
}

je suis à peu près sûr que le chemin d'importation est valide, voici la structure de mes dossiers. et déjà mettre le préfixe ./ avant le nom du dossier.

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

qu'est-ce que j'oublie ici? S'il vous plaît, aidez, J'utilise Windows 10 si c'est important.

javascriptvue.jsbabeljswebpack-2
4
sugai_sama

j'ai résolu mon problème, car il semble que je ne peux pas supprimer la réponse. Je vais éditer comment je résous le problème.

changer cette partie

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

à

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

je me sens dommage de rater ce genre d'erreur.

et changer le chargeur de vue après l'apparition de l'erreur suivante

loader: 'vue'

changé en

loader: 'vue-loader'

puis installez les dépendances nécessaires suggérées par le terminal.

6
sugai_sama

Je ne sais pas quelle version vous utilisez, mais les tentatives suivantes devraient fonctionner - dans l’ensemble, sous réserve que vous exportiez Index.vue avec name: AppComponent:

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

votre code :

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

convertir en :

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

OR

import AppComponent from '@/app/ index'

Après avoir couru:

 npm run dev
1
Manideep

Ce problème est très simple à résoudre et il existe de nombreuses solutions, je vais en présenter deux:

  1. installez/réinstallez les paquetages npm de vue-template-compiler et de vue-loader.
  2. si la première solution ne fonctionne pas, cela signifie que vous avez de nombreux packages npm cassés ou mal configurés. Exécutez donc npm install pour qu'il avertisse de tous les packages devant être installés mais ne pouvant pas l'être, puis installez ces packages et exécutez npm install pour voir si tout fonctionne ok, si vous ne réinstallez pas les paquets manquants/cassés, répétez le processus jusqu'à ce que tous les paquets nécessaires soient installés. 
1
Jordao Manguena