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

Question

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

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

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

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

Answer 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;

从以下位置为 Vue 获取和修改:Recursive import of components using webpack in React