vue ssr 按需加载报错

Question

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/',  redirect:{name: 'articleList'}, name: 'index'},
      { path:'/article', name:'article', component: () => import(/* webpackChunkName: "article" */ './article/index.vue') ,
        children:[
          { path: 'list.html', name: 'articleList', component: () => import(/* webpackChunkName: "articleList" */ './article/articleList.vue') },
          { path: 'articleDetails.html', name: 'articleDetails', component: () => import(/* webpackChunkName: "articleDetails" */ './article/articleDetails.vue') }
        ]
      },
      { path: '/crawler.html', name: 'crawler', component: () => import(/* webpackChunkName: "crawler" */ './crawler/index.vue') },
      { path: '/register.html', name: 'register', component: () => import(/* webpackChunkName: "register" */ './user/register.vue') },
      { path: '/messageBoard.html', name: 'messageBoard', component: () => import(/* webpackChunkName: "messageBoard" */ './messageBoard/index.vue')},
      { path: '/profile.html', name: 'profile', component: () => import(/* webpackChunkName: "profile" */ './profile/index.vue') }
    ]
  })
}

webpack.base.js

const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isPro = require('process').env.NODE_ENV === 'production';

module.exports = {
  mode: 'development',
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        extractCSS: isPro
      }
    },{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },{
      test: /\.less$/,
      use:[isPro ? MiniCssExtractPlugin.loader : 'vue-style-loader','css-loader','less-loader']       
    },{
      test: /\.css$/,
      use:[isPro ? MiniCssExtractPlugin.loader : 'vue-style-loader','css-loader']       
    },{
      test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
      loader: 'file-loader'
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css'
    }),
    new VueLoaderPlugin()
  ],
  resolve: {
    alias: {
      'vue$':'vue/dist/vue.js'
    }
  }
}

ReferenceError: document is not defined
    at r.(anonymous function).r.(anonymous function).(anonymous function).i.push.r.(anonymous function).Promise.then.r.(anonymous function) (webpack/bootstrap:52:0)
    at new Promise (<anonymous>)
    at Function.module.exports.o.e [as e] (webpack/bootstrap:49:0)
    at component (src/router.js:24:65)
    at D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1776:17
    at D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1803:66
    at Array.map (<anonymous>)
    at D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1803:38
    at Array.map (<anonymous>)
    at flatMapComponents (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1802:26)
    at D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1738:5
    at iterator (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1945:7)
    at step (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1719:9)
    at step (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1723:9)
    at runQueue (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1727:3)
    at AbstractHistory.confirmTransition (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1974:3)
    at AbstractHistory.transitionTo (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1876:8)
    at AbstractHistory.push (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:2379:10)
    at VueRouter.push (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:2536:16)
    at bundle.server.js:1:22479
    at new Promise (<anonymous>)
    at t.default (entry/server.js:8:9)

1.报错文件是打包后的 vue-ssr-server-bundle.json。即vue ssr的服务器端文件。
2.如果router处的组件不采用按需加载不会出现错误
3.如果webpack不使用mini-css-extract-plugin 单独提取css也不会报错。
4.报错已经定位是 () => import() reject了

webpack编译没有问题，不会报错。
跪求解答

Answer 1

document对象即文档对象，如果未定义，那么则表示当前环境不支持这个对象，比如nodejs就不支持，因此你要定位看看哪里用了这个对象，一般来说无非就是调用这个对象下的一些方法，比如document.createElement()，再对比一下环境，就能找到问题所在了。

Answer 2

请问解决了吗？ 我也遇到了同样的问题，我使用的sass， 单独提取css 没问题， 但是提取sass的样式 使用了sass的页面就不能正常访问了

Answer 3

1、找出使用了 window、document 等浏览器特有的对象的组件，这些对象只能在 vue生命周期的 mounted 之后使用，created的时候是服务端渲染，是没有这些对象的。
2、import xxx form xxx，也是这个原因，可以使用动态 import

Answer 4

从依赖模块导入样式-官方说明
从 NPM 依赖模块导入 CSS 时需要注意的几点：

在服务器端构建过程中，不应该外置化提取。

在使用 CSS 提取 + 使用 CommonsChunkPlugin 插件提取 vendor 时，如果提取的 CSS 位于提取的 vendor chunk 之中，extract-text-webpack-plugin 会遇到问题。为了解决这个问题，请避免在 vendor chunk 中包含 CSS 文件。客户端 webpack 配置示例如下：

module.exports = {
  // ...
  plugins: [
    // 将依赖模块提取到 vendor chunk 以获得更好的缓存，是很常见的做法。
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // 一个模块被提取到 vendor chunk 时……
        return (
          // 如果它在 node_modules 中
          /node_modules/.test(module.context) &&
          // 如果 request 是一个 CSS 文件，则无需外置化提取
          !/\.css$/.test(module.request)
        )
      }
    }),
    // 提取 webpack 运行时和 manifest
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    }),
    // ...
  ]
}