I've been building my Vue application by using Vue Cli 3.
If I need to import an index.js which is in directory named Dir1, I can import it using
import file1 from '@/components/Dir1/
but somehow it doesn't work with .vue extension files.
I have to expicitly mention the file name such as import Title from @/components/Title/index.vue.
What changes do I have to make in the settings in order to import the .vue extension file without mentioning the filename?
This is how I would do it with Vue.
You may need to tweak the config a little bit to suit your dev environment needs. Note that this is not a full config but a guideline on what should be done based on NPM directory-named-webpack-plugin documentation.
In your webpack.config.js you should have the following (Webpack 3):
const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
// ...
let config = {
// ...
module: {
rules: [
{
test: /\.(js|vue)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
resolve: {
modules: ['components', 'node_modules'],
extensions: ['.js', '.vue'],
plugins: [
new DirectoryNamedWebpackPlugin(true)
]
}
// ...
}
modules.exports = config;
taken and modified for Vue from: Recursive import of components using webpack in React
webpackconfiguration