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

Question

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

编辑:组件是可见的，但不是 react 性的。因此，它们在服务器端渲染，但在客户端不起作用。

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

我有一个带有自定义 CMS 的网站，因此我可以直接在我的帖子中使用任何组件。例如，如果我认为注册组件位于页面中间会更好，那么我可以将其放置在那里。

我正在使用最新版本的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>

我对 webpack 的理解是它会代码分割 @/components/dynamic 文件夹中的所有文件。它确实做到了这一点，并为它们提供了所有散列文件名。

任何帮助将不胜感激。

Answer 1

我认为您的问题在于您在计算方法中使用响应式(Reactive)数据的方式。

如果您在计算方法中使用响应式(Reactive)数据，Vue 会跟踪该关系。这样当 react 数据发生变化时，计算值就会重新计算。

在您的情况下， react 数据不是直接在计算方法中使用，而是在其中的匿名函数中使用。所以 Vue 无法创建这种关系。

尝试将其重写为

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