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. The error file is the packaged vue-ssr-server-bundle.json. The server-side file of vue ssr.
2. If the components at router do not use demand loading, there will be no error
3. If webpack does not use mini-css-extract-plugin to extract css alone, it will not report an error.
4. The error has been positioned as () = > import () reject
there is no problem with webpack compilation and no error will be reported.
kneel for answers