我怎样才能把快运路线和server.js分开？

Question

我一直在密切关注这个Vue SSR指南，在这个例子中，作者将他的快递路线放置在一个名为server.js的文件中。仅为组织目的，我希望将我的快速路保存在src/router文件夹中的一个src/router文件中，而不是在server.js的根文件中。

因此，这是我的router.express.js文件的缩减版本：

const vueServerRenderer = require('vue-server-renderer');
const setupDevServer = require('../../build/setup-dev-server'); //webpack dev config
const express = require('express');

const app = express();
const router = express.Router();

const createRenderer = (serverBundle) =>
    vueServerRenderer.createBundleRenderer(serverBundle, {
        runInNewContext: false,
        template: fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf-8')
    });

let renderer;

if (process.env.NODE_ENV === 'development') {
    setupDevServer(app, (serverBundle) => {
        renderer = createRenderer(serverBundle);
    });

} else {
    renderer = createRenderer(require('../../dist/vue-ssr-server-bundle.json'));
}

router.get('/', async function (req, res) {
    const context = {
        url: req.params['0'] || '/'
    };
    let html;
    try {
        html = await renderer.renderToString(context);
    } catch (error) {
        if (error.code === 404) {
            return res.status(404).send('404 | Page Not Found');
        }
        return res.status(500).send('500 | Internal Server Error');
    }
        res.end(html);
});

module.exports = router;

问题是，我还需要vue-server-renderer代码在server.js文件中。然后，我会让应用程序require成为router.express.js文件，这样快速路线就可以这样工作了：

const vueServerRenderer = require('vue-server-renderer');
const setupDevServer = require('../../build/setup-dev-server'); //webpack dev config    
const app = express();

     const createRenderer = (serverBundle) =>
            vueServerRenderer.createBundleRenderer(serverBundle, {
                runInNewContext: false,
                template: fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf-8')
            });

        let renderer;

        if (process.env.NODE_ENV === 'development') {
            setupDevServer(app, (serverBundle) => {
                renderer = createRenderer(serverBundle);
            });

        } else {
            renderer = createRenderer(require('../../dist/vue-ssr-server-bundle.json'));
        }

    app.use(require('./router/express.router.js'));

每当我这样做的时候，我都会看到Webpack的错误。

WebpackOptionsValidationError:无效的配置对象。Webpack已经使用一个与API模式不匹配的配置对象进行初始化。- configuration.entry“‘app”应该是字符串。

如果我将vue-server-renderer代码从server.js中删除，那么它就可以正常运行。但是，在server.js中包含这些代码的原因是为了使开发环境能够正常工作。基本上，如果代码不在server.js中，那么我就不能使用热重加载或其他任何东西。

如果我摆脱了router.express.js，并将所有这些代码放入server.js中，包括路由，那么包括我的开发环境在内的所有代码都能很好地工作。

为什么我不能(或者更确切地说，我如何才能)将我的快递线路保存在一个单独的文件中，并且仍然可以使用vue-server-renderer的内容？

更新：setup-dev-server.js文件：

const setupDevServer = (app, onServerBundleReady) => {
    const webpack = require('webpack');
    const MFS = require('memory-fs');
    const path = require('path');
    const clientConfig = require('./webpack.client.config');
    const serverConfig = require('./webpack.ssr.config');

    // additional client entry for hot reload
    clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app];

    const clientCompiler = webpack(clientConfig);

    // setup dev middleware
    app.use(require('webpack-dev-middleware')(clientCompiler, {
       publicPath: clientConfig.output.publicPath,
       serverSideRender: true,
       logLevel: 'silent',
    }));

    // setup hot middleware
    app.use(require('webpack-hot-middleware')(clientCompiler));

    // watch src files and rebuild SSR bundle
    global.console.log('Building SSR bundle...');
    const serverCompiler = webpack(serverConfig);
    const mfs = new MFS();

    serverCompiler.outputFileSystem = mfs;
    serverCompiler.watch({}, (error, stats) => {
        if (error) throw error;

        global.console.log(
            `${stats.toString({
                colors: true,
                modules: false,
                children: false,
                chunks: false,
                chunkModules: false,
            })}\n\n`
        );

        if (stats.hasErrors()) {
            console.error(stats.compilation.errors);
            throw new Error(stats.compilation.errors);
        }
        // read bundle generated by vue-ssr-webpack-plugin        
        const bundle = JSON.parse(
            mfs.readFileSync(path.join(clientConfig.output.path, 'vue-ssr-server-bundle.json'), 'utf-8')
        );
        onServerBundleReady(bundle);
    });
};

module.exports = setupDevServer;

Answer 1

1)在“router.express.js”文件的内部写:位于文件底部的module.exports = router;。

2)在“server.js”文件的内部写:位于文件顶部的const router = require('./router/express.router.js');。

3)现在，您曾经让app.use(require('./router/express.router.js'));将其替换为app.use(router);

4)在“server.js”的顶部写const vueSsrBundle = require('../../dist/vue-ssr-server-bundle.json')

5)最后将renderer = createRenderer(require('../../dist/vue-ssr-server-bundle.json')替换为renderer = createRenderer(vueSsrBundle)

编辑您所面临的问题是在这个线路上，可能与文件'app.js‘或“客户-入口-js”有关