使用ES6语法在vue中导入多个组件无效[重复]

Question

因此，我试图创建一个vue实例，该实例需要文件夹“views/”中的其他组件

这里是文件结构：

• 项目
  • 建立/
  • 配置
  • node_modules/
  • src/
    • 视图
    • 组件

    如果我在pp.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
    

    这是网页。基础配置。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'),
        },
      },
    

    我真的不知道怎么了，请帮忙，谢谢

Answer 1

这不是正确的方法。

import { something } from 'some_file';

是关于进口默认情况下没有出口的东西！当一个文件暴露了很多东西时，这是很有帮助的。

import Something from 'some_file';

是关于从文件中导入默认导出的项目。

您所写的内容在当前设置下是不可能的。你必须这样写：

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

然后创建一个索引。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