组件动态导入在 router.js 中不起作用

Posted 2023-02-23

【中文标题】组件动态导入在 router.js 中不起作用

【英文标题】：Component dynamic import doesn't work from router.js

【发布时间】：2021-06-01 01:12:43

【问题描述】：

使用 Nuxt.js，在我的 router.js 中，我正在尝试导入我的路由组件：

  path: '/',
  component: () => import(/* webpackChunkName: "index" */ '~/pages/index.vue')

我收到此错误：

组件中未定义的渲染函数或模板：匿名

我遇到了别人的 Nuxt.js 项目，他们在最后添加了以下内容，并且它可以工作：

  path: '/',
  component: () => import(/* webpackChunkName: "index" */ '~/pages/index.vue').then(m => m.default || m)

我的import()返回的对象是这样的：

在另一个 Vue.js 非 Nuxt 项目中，相同类型的 import() 看起来像这样：

在这两种情况下，组件都嵌套在一些“默认”对象中。但是对于 Nuxt.js，您似乎必须显式导入该对象，而对于常规 Vue.js，您不必指定。

为什么？

【问题讨论】：

github.com/nuxt-community/router-module/issues/82

【参考方案1】：

关于为什么模块嵌套在 default 对象中：这是因为 Nuxt 使用 ES6 样式模块。 ES6 风格的模块编写如下：

export default 
  // some object
;

默认不是您可以拥有的唯一属性。 More syntax.

关于为什么 vue-router 在没有 .default 的情况下工作，这是因为代码比 Nuxt 使用的代码更通用。 Nuxt 已经发布了它自己的构建器，并且始终使用 ES6 模块。

另一方面，vue-router 不知道它将如何构建。所以为了更方便使用，vue-router 会自动检查模块是否为 ES6。

const resolve = once(resolvedDef => 
  if (isESModule(resolvedDef)) 
    resolvedDef = resolvedDef.default
  
  // ...

来源：code of vue-router。

您可能已经知道，在 Nuxt 项目中使用 router.js 文件非常少见，因为 Nuxt 已经有自己的路由系统，可以将您的代码分成每个页面的块。文档here.

【讨论】：

非常感谢！是的，我知道 Nuxt 会自动执行此操作，但我有一个奇怪的项目要求：我只需要上传一些已部署的路由及其相关资产。问题是，默认名称类似于“a9b04e2.js”，因此无法知道哪个 JS 文件与哪个路由对应。在我的“router.js”中，我想使用/* webpackChunkName: "..." */ 指定这样的名称，但由于某种原因它没有效果（JS 文件仍然带有随机名称......）。如果您对此问题有任何建议，我将不胜感激:)

@drake035 也许你应该在单独的帖子中问这个问题！

好主意，我在这里创建了一个新问题：***.com/questions/66444681/…