Question

我正在使用其路径和文件名在nuxt.js中动态导入组件。它在开发中效果很好，在您首次加载网站时有效，但在生产环境中，当您导航到新页面时，组件无法加载-错误404。

编辑：这些组件是可见的，但不是反应性的。因此，它们正在呈现服务器端，但随后无法在客户端上工作。

我怀疑这是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

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

如果您在计算方法中使用反应性数据，则Vue会跟踪该关系。这样，当反应性数据发生变化时，计算出的值将再次得到计算。

在您的情况下，反应式数据不是在计算方法中直接使用，而是在其中的匿名函数中使用。因此，Vue无法创建关系。

尝试将其重写为

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

Answer 2

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

如何修复在生产环境中找不到的vue动态异步组件？

2 个答案: