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

I know it's a bit outdated post, but if anyone still stumbles upon this as I did looking up the same problem, I solved it by using the same mechanism as nuxt.js default generated router does, wrapping the component dynamic import as follows:

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'));