使用 ES6 语法在 vue 中导入多个组件不起作用

Question

所以我正在尝试创建一个 vue 实例，它需要文件夹 "views/"

中的其他组件

文件结构如下：

项目
- 构建/
- 配置/
- node_modules/
- 源/
  - 观看次数/
  - 组件/
- App.vue

如果我在 App.vue 中执行此操作，服务器将运行没有错误：

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

但如果我改用这个：

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

服务器不会运行而会 return:

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

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

我真的不知道哪里出了问题，请帮忙，thx

Answer 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
}

现在应该可以了，请尝试在 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

上阅读更多关于 ES6 导入的内容

使用 ES6 语法在 vue 中导入多个组件不起作用

Import multiple components in vue using ES6 syntax doesn't work

javascript

importerror

ecmascript-6

webpack

vuejs2