vue + nuxt：动态导入路由页面在渲染时失败

Question

我正在尝试加快 vue/nuxt 应用程序的加载速度。 我遵循将路由页面拆分为异步加载的好主意，如 https://router.vuejs.org/guide/advanced/lazy-loading.html

这意味着主要是转弯

import Contact from '@/components/pages/Contact'
...
Router({
    routes: [
        {
            path: __('route_contact'),
            name: 'contact',
            component: Contact
        },

进入

const Contact = () => import('@/components/pages/Contact');
...
Router({
    routes: [
        {
            path: __('route_contact'),
            name: 'contact',
            component: Contact
        },

但不幸的是它失败了。

nuxt build和nuxt start的准备过程正常进行，小块生成打包，服务器启动。

但是，当我尝试通过前端（使用内部链接）呈现此页面时，没有输出，并且当我重新加载有问题的页面（触发 SSR）时，出现服务器错误，并显示以下输出 nuxt start：

{ Error: render function or template not defined in component: anonymous
at normalizeRender (/var/www/site/front/node_modules/vue-server-renderer/build.js:7396:13)
at renderComponentInner (/var/www/site/front/node_modules/vue-server-renderer/build.js:7520:3)
at renderComponent (/var/www/site/front/node_modules/vue-server-renderer/build.js:7491:5)
at renderNode (/var/www/site/front/node_modules/vue-server-renderer/build.js:7407:5)
at renderComponentInner (/var/www/site/front/node_modules/vue-server-renderer/build.js:7527:3)
at renderComponent (/var/www/site/front/node_modules/vue-server-renderer/build.js:7491:5)
at renderNode (/var/www/site/front/node_modules/vue-server-renderer/build.js:7407:5)
at renderComponentInner (/var/www/site/front/node_modules/vue-server-renderer/build.js:7527:3)
at renderComponent (/var/www/site/front/node_modules/vue-server-renderer/build.js:7491:5)
at RenderContext.renderNode (/var/www/site/front/node_modules/vue-server-renderer/build.js:7407:5)
at RenderContext.next (/var/www/site/front/node_modules/vue-server-renderer/build.js:2428:14)
at RenderContext.next (/var/www/site/front/node_modules/vue-server-renderer/build.js:2441:12)
at RenderContext.cachedWrite [as write] (/var/www/site/front/node_modules/vue-server-renderer/build.js:2287:9)
at RenderContext.next (/var/www/site/front/node_modules/vue-server-renderer/build.js:2432:16)
at RenderContext.cachedWrite [as write] (/var/www/site/front/node_modules/vue-server-renderer/build.js:2287:9)
at RenderContext.renderNode (/var/www/site/front/node_modules/vue-server-renderer/build.js:7415:15) statusCode: 500, name: 'NuxtServerError' }

有人知道该怎么做吗？

Answer 1

我知道这是一个有点过时的帖子，但如果有人在我查找相同问题时仍然偶然发现这个问题，我通过使用与 nuxt.js 默认生成的路由器相同的机制来解决它，将组件动态导入包装为如下：

function interopDefault(promise) {
  return promise.then(m => m.default || m);
}

const HomeIndex = () => interopDefault(import('@/pages/home/index.vue'));
const HomeAboutUs = () => interopDefault(import('@/pages/home/about-us.vue'));