Vue.js 如何修复生产中找不到的vue动态异步组件？

我正在使用nuxt.js的路径和文件名动态导入组件。它在开发中运行良好，当您第一次加载网站时，但在生产中，当您导航到新页面时，组件不会加载-错误404

编辑：组件可见，但不是被动的。因此，它们呈现的是服务器端，而不是客户端

我怀疑这是webpack的一个问题，我曾尝试使用魔法注释来保留文件名，但这并没有改变任何东西

我有一个自定义的CMS网站，所以我可以在我的帖子中直接使用任何组件。e、 如果我认为注册组件在页面的中间位置会更好，那么我可以把它放在那里

我使用的是node.js、express和nuxt.js的最新版本

下面的代码在初始加载时效果很好，但在路由更改时效果不好

<template>
  <component :is="comp" />
</template>

<script>

export default {
  name: 'DynamicComponent',
  props: {
    componentName: {
      type: String,
      default: ''
    }
  },
  computed: {
    comp() {
      return () => import(`@/components/dynamic/${this.componentName}`)
    }
  }
}

</script>

导出默认值{
名称：“DynamicComponent”，
道具：{
组件名称：{
类型：字符串，
默认值：“”
}
},
计算：{
comp（）{
return（）=>import（`@/components/dynamic/${this.componentName}`）
}
}
}

我对webpack的理解是，它将代码拆分@/components/dynamic文件夹中的所有文件。它做到了这一点，并为它们提供了所有哈希文件名

---

任何帮助都将不胜感激。

我认为您的问题在于在计算方法中使用反应数据的方式

如果在计算方法中使用反应数据，Vue将跟踪该关系。因此，当反应数据发生变化时，将再次计算计算值

在您的例子中，被动数据不是直接在computed方法中使用，而是在其内部的匿名函数中使用。因此，Vue无法创建关系

尝试将其改写为

computed: {
    comp() {
      const componentName = this.componentName;
      return () => import(`@/components/dynamic/${componentName}`);
    }
  }

---

我认为问题在于webpack中的publicPath配置选项。您的组件可能在生产中引用了错误的目录。在生产构建期间修改vue.config.js中的publicPath选项，它应该可以工作

谢谢dude。我疯狂地试图弄明白为什么这个计算属性不是反应性的：

component（）{return（）=>import（`@/Pages/Reports/${this.currentReport}`）；}