相关疑难解决方法(0)

我有一些在App.tsx. App.tsx用于Index.tsx渲染并附加到body.

   const IndexPage = lazy(() => import("../features//IndexPage"));
    const TagsPage = lazy(
      () => import("../features/tags/TagsPage")
    );
    const ArticlePage = lazy(() => import("../features/article/ArticlePage"));

    const SearchResultPage = lazy(
      () => import("../features/search-result/SearchResultPage")
    );

    const ErrorPage = lazy(() => import("../features/error/ErrorPage"));

    ----

    <BrowserRouter basename={basename}>
      <Suspense fallback={<Fallback />}>
        <Routes>
          <Route path={INDEX} element={<IndexPage />} />
          <Route path={ARTICLE} element={<ArticlePage />} />
          <Route path={TAGS} element={<TagsPage />} />
          <Route path={SEARCH} element={<SearchResultPage />} />
          <Route path={ERROR} element={<ErrorPage />} />
          <Route path="/*" element={<ErrorPage />} /> …

我们有一个应用程序，我们在路由定义中使用动态导入语法，如下所示：

  ...
  component: () => import('./components/SomeComponent'),

我们最近过渡到了 vite，自从切换以来，TypeError: Failed to fetch dynamically imported module每当我们部署新版本的应用程序时，我们都会捕捉到这一点。

根据这篇 SO post，发生这种情况是因为文件的哈希在新部署中无效，但是当我们完全交付新版本时，为什么这些文件仍然被以前的哈希引用？

我还发现了一个遇到相同错误的上一个问题，并在其线程中找到了这个链接，该链接讨论了 rollup 如何期望动态导入的特定语法：

// current
component: () => import('./components/SomeComponent')

// expected?
component: () => import('./components/SomeComponent.vue')

这可能就是我们收到该Failed to fetch dynamically...错误的原因吗？因为我的动态导入缺少文件扩展名？我有点困惑，因为即使没有文件扩展名，动态导入似乎仍然可以工作，只是我们在新部署上发现了错误。