vue 项目中使用粘性布局不起作用,使用ES6语法在vue中导入多个组件不起作用

So I am trying to create a vue instance that needs other components from folder "views/"

Here is the file structure:

Project

build/

config/

node_modules/

src/

views/

components/

App.vue

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

import Navbar from 'layouts/Navbar'

import Topbar from 'layouts/Topbar'

import AppMain from 'layouts/AppMain'

But if I try this instead:

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

The server won't run and will return:

This dependency was not found:

* views/ in ./src/router/index.js

Here is the 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'),

},

},

I really have no idea what's wrong, plz help, thx

解决方案

This is not the right way to do it.

import { something } from 'some_file';

is about importing something which is not exported by default! This is helpful in case when one file exposes a lot of things.

import Something from 'some_file';

is about importing the default exported item from your file.

What you write is not possible with the current setup. You'll have to write it like:

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

then create a index.js file in layouts and then following will be the content for that file:

import Navbar from 'layouts/Navbar'

import Topbar from 'layouts/Topbar'

import AppMain from 'layouts/AppMain'

export {

Navbar,

Topbar,

AppMain

}