web-dev-qa-db-fra.com

Importer plusieurs composants dans vue en utilisant la syntaxe ES6 ne fonctionne pas

J'essaie donc de créer une instance vue qui a besoin d'autres composants du dossier "views /"

Voici la structure du fichier:

  • Projet
    • construire/
    • config /
    • node_modules /
    • src /
      • vues /
      • composants/
    • App.vue

Si je fais cela dans App.vue, le serveur fonctionnera sans erreur:

import Navbar from 'layouts/Navbar'
import Topbar from 'layouts/Topbar'
import AppMain from 'layouts/AppMain'

Mais si j'essaye à la place:

import { AppMain, Navbar, Topbar } from 'layouts/'

Le serveur ne fonctionnera pas et retournera:

This dependency was not found:
* views/ in ./src/router/index.js

Voici le webpack.base.config.js

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json', '.scss'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'layouts': resolve('src/layouts'),
      'views': resolve('src/views'),
      'components': resolve('src/components'),
      'variables': path.resolve(__dirname, '../src/assets/common/variables.scss'),
    },
  },

Je n'ai vraiment aucune idée de ce qui ne va pas, aide plz, thx

javascriptwebpackecmascript-6importerrorvuejs2
12
Hansen W

Ce n'est pas la bonne façon de procéder.

import { something } from 'some_file';

consiste à importer quelque chose qui n'est pas exporté par défaut! Cela est utile dans le cas où un fichier expose beaucoup de choses.

import Something from 'some_file';

concerne l'importation de l'élément exporté par défaut à partir de votre fichier.

Ce que vous écrivez n'est pas possible avec la configuration actuelle. Vous devrez l'écrire comme:

import { AppMain, Navbar, Topbar } from 'layouts';

puis créez un index.js fichier dans les mises en page, puis le contenu de ce fichier:

import Navbar from 'layouts/Navbar'
import Topbar from 'layouts/Topbar'
import AppMain from 'layouts/AppMain'

export {
  Navbar,
  Topbar,
  AppMain
}

Cela devrait fonctionner maintenant, essayez de lire plus sur les importations ES6 sur https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

17
aks