Import multiple components in vue using ES6 syntax doesn't work : <p>So I am trying to create a vue instance that needs other components from folder "views/"</p>

<p>Here is the file structure:</p>

<ul>
<li>Project

<ul>
<li>build/</li>
<li>config/</li>
<li>node_modules/</li>
<li>src/

<ul>
<li>views/</li>
<li>components/</li>
</ul></li>
<li>App.vue</li>
</ul></li>
</ul>

<p>If I do this in App.vue, the server will run with no error:</p>

<pre><code>import Navbar from 'layouts/Navbar'
import Topbar from 'layouts/Topbar'
import AppMain from 'layouts/AppMain'
</code></pre>

<p>But if I try this instead:</p>

<pre><code>import { AppMain, Navbar, Topbar } from 'layouts/'
</code></pre>

<p>The server won't run and will return:</p>

<pre><code>This dependency was not found:
* views/ in ./src/router/index.js
</code></pre>

<p>Here is the webpack.base.config.js</p>

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

<p>I really have no idea what's wrong, plz help, thx</p>
