Импорт нескольких компонентов в vue с использованием синтаксиса ES6 не работает [дубликат]

этот вопрос уже есть ответ здесь:

поэтому я пытаюсь создать экземпляр vue, которому нужны другие компоненты из папки " views/"

вот файл структура:

    • build/
    • config/
    • папки node_modules/
    • src/
      • вид/
      • компоненты/
    • App.vue

если я сделаю это в приложении.Вью, сервер будет работать без ошибок:

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

но если я попробую это вместо этого:

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

сервер не будет работать и будет возвращение:

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

вот webpack.основа.конфиг.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'),
    },
  },

Я действительно понятия не имею, что случилось, PLZ help, thx

9
ecmascript-6 importerror javascript vuejs2 webpack

1 ответов

Это не правильный способ сделать это.

import { something } from 'some_file';

об импорте чего-то, что не экспортируется по умолчанию! Это полезно в случае, когда один файл предоставляет много вещей.

import Something from 'some_file';

об импорте экспортированного элемента по умолчанию из вашего файла.

то, что вы пишете, невозможно с текущей настройкой. Вам придется написать это так:

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

затем создать index.js файл в макетах, а затем следующий будет содержимым для этот файл:

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

export {
  Navbar,
  Topbar,
  AppMain
}

Это должно работать сейчас, попробуйте прочитать больше об импорте ES6 на https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

11