So I am trying to create a vue instance that needs other components from folder "views/"
Here is the file structure:
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
}
This should work now, try reading more about ES6 imports on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With