服务端渲染路由异步加载出错，而且 js 文件内容是 html 代码

来源：5-3 服务端渲染的entry配置

haisheng_lin

2019-04-02

老师，我在学习到服务端渲染的 5-2 和 5-3 章节时出现两个问题，可以到 https://github.com/haisheng-lin/vue-ssr-learning/tree/fix-ssr 去查看。

1. 路由设置为异步加载时会报错

/client/config/router.js

// import Todo from '../views/todo/todo.vue'
// import Login from '../views/login/login.vue'

export default [
  { // 默认根路径跳转至 app
    path: '/',
    redirect: '/app',
  },
  {
    path: '/app',
    // component: Todo,
    component: () => import('../views/todo/todo.vue'),
  },
  {
    path: '/login',
    // component: Login,
    component: () => import('../views/login/login.vue'),
  },
]

报错如下：
图片描述

如果不是异步加载的话不会出现这个错误。

2. 打包的 js 文件内容是 html 代码

图片描述

里面的 bundle.c22c0763.js 和 main.a0570e2f9c99d3b78eb6.hot-update.js 内容是 html 代码，跟当前图片里的一模一样。

我不在这里贴太多代码了，老师可以去我给的链接帮忙看看吗？谢谢！

写回答

1回答

haisheng_lin

提问者

2019-04-02

第一个问题，翻过之前的问答，老师提过使用 'mini-css-extract-plugin'，但是又报 'document is not defined' 的错误，目前为止找到的方案是使用 'null-loader'，链接：https://github.com/webpack-contrib/mini-css-extract-plugin/issues/90#issuecomment-380796867，但是就看 html 源码也没看出有把样式单独打包出来 ...

//img.mukewang.com/szimg/5ca3369e00017ebc08070493.jpg