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

Posted 2023-02-22

【中文标题】如何修复生产中找不到的 vue 动态异步组件？

【英文标题】：How to fix vue dynamic async components not found in production?

【发布时间】：2020-02-22 13:24:50

【问题描述】：

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

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

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

我有一个带有自定义 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 文件夹中的所有文件。它确实这样做了，并为它们提供了所有散列的文件名。

任何帮助将不胜感激。

【参考方案1】：

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

如果您在计算方法中使用响应式数据，Vue 会跟踪该关系。这样当响应式数据发生变化时，计算值会再次计算。

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

试着改写成

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

【讨论】：

谢谢老兄。我想弄清楚为什么这个计算出来的道具没有反应，我快疯了：component() return () => import(`@/Pages/Reports/$this.currentReport`);

【参考方案2】：

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