Webpack 构建错误：无法解析 PrimeVue UI 组件中的子组件答案

【问题标题】：Webpack Build Error: Can't resolve subcomponents within a PrimeVue UI componentWebpack 构建错误：无法解析 PrimeVue UI 组件中的子组件
【发布时间】：2020-09-13 05:09:17
【问题描述】：

我无法使用 webpack 构建某些 PrimeVue UI 组件。

我已经尝试了几个组件，并且所有基本组件都可以正常工作，但是一旦我尝试使用需要子组件的组件，webpack 就无法构建。到目前为止，我使用 Breadcrumb 和 PanelMenu 组件体验过这一点。

错误是：

ERROR in ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './PanelMenuSub' in '/my-application-directory/node_modules/primevue/components/panelmenu'
 @ ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&) 27:0-42 86:24-36
 @ ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&
 @ ./node_modules/primevue/components/panelmenu/PanelMenu.vue
 @ ./node_modules/primevue/panelmenu.js
 @ ./interface/html5/vue-components/Menu.js
 @ ./interface/html5/vue-components/App.js
 @ ./interface/html5/vue-main.js

我的 webpack 配置如下：

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    mode: 'development',
    entry: 'vue-main.js',
    output: {
        filename: 'vue-main.bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            // the below will apply to both plain `.js` files AND `<script>` blocks in `.vue` files
            // the below will apply to both plain `.css` files AND `<style>` blocks in `.vue` files
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

组件完全按照文档中的描述使用。

这可能是什么原因造成的？ Breadcrumb 组件也是如此，只是它找不到 BreadcrumbItem 组件。我检查了 node_modules 目录，文件在那里。

这是 webpack 配置文件问题、PrimeVue 错误还是用户（我）错误？

【问题讨论】：

标签： vue.js webpack vue-loader primevue

【解决方案1】：

那是你没有 babel 的完整配置吗？我会尝试正确解决。

https://webpack.js.org/configuration/resolve/

  resolve: {
    alias: {
      '@': res('src'),
      'vue$': 'vue/dist/vue.esm.js'
    },
    modules: [res('node_modules')],
    extensions: ['.js', '.vue', '.json']
  },
  resolveLoader: {
    modules: [res('node_modules')]
  }

【讨论】：

是的，我没有使用 babel。你需要吗？如果是这样，为什么。希望尽可能保持精简。这在主干/jQuery 项目中用作向 vue 的逐步转换。
如果您能解释一下您解决的不同问题以及他们为什么要解决它，是否有可能？现在就尝试一下，我正在阅读您发布的链接，但这将有助于理解
所以它现在似乎工作了......但不知道为什么。因此，如果我理解正确，这基本上只是告诉 webpack 去 node_modules 中查找东西。但为什么需要这样做？发现第一个组件 PanelMenu 非常好，但找不到它的子组件（在同一 node_modules 目录中）。那么这是在解决问题，还是只是通过绕过来掩盖问题？
你只需要定义 webpack 应该在哪里解析模块。但是.. 如果您对构建工具不是很熟悉并且已经在高效地工作，我强烈建议您使用 Vue-Cli。否则，您将在很长一段时间内忙于浏览器兼容性和捆绑。 cli.vuejs.org 否则你可以在这里学习一个功能齐全的最新 webpack 样板 -> darvin.dev
@darvin，当我阅读 vue-cli 时，我尝试走 webpack 路线，因为为你做了太多事情，所以它变得更加复杂。我的经理甚至不想使用 webpack，因为它脱离了手动构建的控制。但它似乎比更黑盒的 vue-cli 更好。我们还需要转换一些复杂的手动流程，所以认为 webpack 会比 vue-cli 更好？