如何通过仅提及父目录名称而不是文件名来导入 index.vue？答案

【问题标题】：How to import index.vue by just mentioning the parent directory name rather than filename?如何通过仅提及父目录名称而不是文件名来导入 index.vue？
【发布时间】：2019-06-20 03:01:19
【问题描述】：

我一直在使用 Vue Cli 3 构建我的 Vue 应用程序。

如果我需要导入名为Dir1 的目录中的index.js，我可以使用 import file1 from '@/components/Dir1/ 但不知何故，它不适用于.vue 扩展文件。

我必须明确提及文件名，例如import Title from @/components/Title/index.vue。

为了在不提及文件名的情况下导入.vue 扩展文件，我必须在设置中进行哪些更改？

【问题讨论】：

这对我来说很好用。您能否提供更多背景信息或针对您的问题的回购？
发布您的webpack 配置
您的问题解决了吗？我有同样的问题，似乎无法找到解决方案。我的项目是用 Vue 的 CLI 3 初始化的

标签： vue.js webpack ecmascript-6 vuejs2

【解决方案1】：

这就是我使用 Vue 的方式。

您可能需要稍微调整配置以适应您的开发环境需求。请注意，这不是完整的配置，而是基于NPM directory-named-webpack-plugin 文档的指导方针。

在您的 webpack.config.js 中，您应该具有以下内容（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;

从Recursive import of components using webpack in React为 Vue 获取和修改

【讨论】：