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），我收到服务器错误，其输出为{{1} }：

nuxt start

有人知道该怎么做吗？

Answer 1

我知道这是一个过时的帖子，但是如果有人仍然像我那样查找相同的问题时仍然迷迷糊糊，我可以通过使用与nuxt.js默认生成的路由器相同的机制来解决它，将componennt动态导入包装为如下：

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

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

1 个答案: