SSR报错Error:... Avoid using CommonsChunkPlugin in the server config.

SSR是很坑,这个打包报错我都弄了几个小时,才发现问题

解决方法:

splitChunks: TARGET_NODE ? false : undefined

node环境下必须将splitChunks才不报错

完整vue.config.js文件

//webpack 服务端、客户端插件
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

// 优化相关
const nodeExternals = require('webpack-node-externals')
// 合并相关
const merge = require('lodash.merge')

// 环境变量:决定入口是客户端还是服务端
const TARGET_NODE = process.env.WEBPACK_TARGET === "node"
const target = TARGET_NODE? "server": "client"

module.exports = {
    css: {
        extract: false
    },
    // 根据服务器或者客户端,编译到不同文件夹
    outputDir: './dist/'+target,
    configureWebpack: ()=>({
        // 将entry指向应用程序的 server/client 文件
        entry: `./src/entry-${target}.js`,
        // 对 bundle renderer 提供 source map支持
        devtool: 'source-map',
        // 这运行 webpack 以 Node 适用方式处理动态导入(dynamic import)
        // 并且还会在编译 Vue 组件时告知 'vue-loader' 输出面向服务器代码(server-oriented code)
        target: TARGET_NODE? 'node' : 'web',
        node: TARGET_NODE? undefined : false,
        output: {
            // 此处告知 server bundle 使用Node风格导出模块
            libraryTarget: TARGET_NODE ? "commonjs2" : undefined
        },
        //外置化应用程序依赖模块。可以使服务器构建速度更快,并生成较小的bundle文件
        externals: TARGET_NODE
            ? nodeExternals({
                // 不要外置化webpack  需要处理的依赖模块
                // 可以在这里添加更多的文件类型。例如,未处理 *.vue 原始文件
                // 你还应该将修改 `global` (例如 polyfill)的依赖模块列入白名单
                whitelist: [/\.css$/]
            })
            : undefined,
        optimization: {
            splitChunks: TARGET_NODE ? false : undefined 
        },
        // 这是将服务器的整个输出构建为单个JSON文件的插件
        // 服务端默认文件名为 `vue-ssr-server-bundle.json`
        plugins: [TARGET_NODE? new VueSSRServerPlugin(): new VueSSRClientPlugin()]
    }),

    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                merge(options, {
                    optimizeSSR: false
                })
            })
    }
}

 上一篇
从0到1打造Vue服务端渲染-三 从0到1打造Vue服务端渲染-三
改造上节课node服务index.js,通过用户传进来的url来渲染页面内容,我从新建了一个server.js //nodejs 服务器 const express = require('express') const Vue = req
2019-12-10
下一篇 
从0到1打造Vue服务端渲染-一 从0到1打造Vue服务端渲染-一
概念 将一个vue组件在服务端渲染为HTML字符串并发送到浏览器,最后再将这些静态标记“激活”为可交互应用程序的过程称为服务端渲染 实现vue ssr的具体过程 创建工程 vue-cli3 vue create ssr-demo 安装依赖
2019-12-09
  目录