开发者问题收集

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

2018-08-31
2253
javascript vue.js nuxt.js

我正在尝试加快我们的 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' }

有人知道该怎么做吗？

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'));
Jan Holas
2019-05-10