问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Webpack动态加载组件路径正确但菜单页找不到，如何解决？

头像
BinZl00
    32
    新手上路，请多包涵

    image.png
    image.png
    某个菜单页找不到，但是存放的路径也是对的，网上说webpack的写法问题
    但是写法都是符合的

     component(resolve) {
            // 判断是否为首路由
            if (first) {
              require(['../page/index'], resolve)
              return
              // 判断是否为多层路由
            } else if (isChild && !first) {
              require(['../page/index/layout'], resolve)
              return
              // 判断是否为最终的页面视图
            } else {
              require([`../${component}.vue`], resolve)
            }
          },

    到底什么原因

    webpack的写法修改过，发现没问题

    webpack动态加载
    阅读 1.6k
    avatarAI BotBETA

    在Webpack中处理动态加载组件时，使用require.ensure或者ES6的import()函数是更常见且推荐的方式，因为require直接用在异步组件加载中可能不会按预期工作，特别是在Webpack的某些配置下。require在Webpack中通常被处理为同步导入，而Webpack的代码分割（code splitting）功能依赖于异步导入。

    在你的代码中，你使用了require函数结合回调函数来实现动态加载，但这种方式可能不会触发Webpack的代码分割。此外，你的代码中还存在return语句在require调用之后，这会导致require调用之后的代码永远不会被执行，这可能不是你想要的行为。

    推荐解决方案

    1. 使用import()代替require：
      使用import()来动态加载组件，这样可以确保Webpack能够正确地处理代码分割。

      component: () => import(`../${component}.vue`)

    或者，如果你需要根据条件动态加载不同的组件，可以这样写：

    component: () => {
  if (first) {
    return import('../page/index.vue');
  } else if (isChild && !first) {
    return import('../page/index/layout.vue');
  } else {
    return import(`../${component}.vue`);
  }
}
    1. 确保Webpack配置正确：
      检查你的Webpack配置，确保它支持代码分割（通常是默认开启的，但如果你使用了某些特殊的插件或加载器，可能会影响这一点）。
    2. 检查组件路径：
      尽管你说路径是正确的，但最好再次确认。Webpack的路径解析有时可能会因为项目结构或Webpack配置的不同而有所变化。
    3. 查看Webpack构建输出：
      运行Webpack构建并查看输出，看看是否有关于模块解析或代码分割的错误或警告。
    4. 调试和测试：
      在开发环境中使用Webpack的source map功能来调试你的代码，这可以帮助你更清楚地看到实际加载的模块和路径。

    通过上述步骤，你应该能够解决动态加载组件时遇到的问题。如果问题仍然存在，可能需要更详细地检查Webpack的配置或项目的其他部分。

    1 个回答
    得票最新
    头像
    西索酱
      40211752
      ✓ 已被采纳

      你的文件名好像是 xinyitask .vue，但你引用的是 xinyitask.vue ，不是同一个文件名。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题