Node.js 如何将Express routes与server.js分开？

我一直在密切关注这一点，在那个例子中，作者将他的Express routes放在一个名为

server.js

的文件中。为了便于组织，我希望将我的快递路线保存在我的

src/router

文件夹中的

router.Express.js

文件中，而不是保存在

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;

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;

问题是我还需要

vue服务器渲染器

code位于

server.js

文件中。然后，我将使应用程序

需要
路由器.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'));

每当我这样做时，我都会收到一个网页错误，说明

WebPackageOptions验证错误：配置对象无效。网页包
已使用不匹配的配置对象初始化
API模式。
-configuration.entry应为字符串

如果我从
server.js
中删除
vue服务器渲染器
代码，那么它运行正常。但是将代码放在
server.js
中的原因是为了使开发环境能够正常工作。基本上，如果代码不在
server.js
中，那么我就不能使用热重新加载或任何东西

如果我去掉了
router.express.js
并将所有代码放入
server.js
中，包括路由，那么包括我的开发环境，所有代码都可以完美工作

为什么我不能（或者更确切地说，我如何才能）将我的Express routes保存在一个单独的文件中，并且仍然让
vue服务器渲染器
工作

更新：
setup dev server.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;

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;

1） 在“router.express.js”文件中写入：
module.exports=router位于文件底部

2） 在“server.js”文件中写入：
constrouter=require（'./router/express.router.js'）
在文件的顶部

3） 现在，您曾经拥有
app.use（require（'./router/express.router.js'）
将其替换为
app.use（路由器）

4） 在“server.js”的顶部写入
const vueSsrBundle=require（'../../dist/vue ssr server bundle.json'）

5） 最后替换
renderer=createRenderer（需要（'../../dist/vue ssr server bundle.json'）
使用
renderer=createRenderer（vueSsrBundle）

编辑您面临的问题与此有关，可能与文件“app.js”或
有关。您可以从名为“setup dev server”的文件中获取代码吗？如果该文件的JSON对象中有一个名为“app”的值，请检查它是否包含在引号中。检查我的回答第5点）更新。我刚刚更新了我的问题，包括
setup dev server
的内容。我看不到应用程序中的JSON对象，我不这么认为？
webpack.client.config
将条目显示为应用程序，如下所示
entry:{app:utils.resolve（'/src/entry client.js'），
您的问题就在这里：通过一个推导过程，问题是我无法拥有
setupDevServer（app，（serverBundle）=>{renderer=createRenderer（serverBundle）；}）;          } else{renderer=createRenderer（require（'../dist/vue ssr server bundle.json'））；}
在
server.js
和
router.express.js
中的代码-它只能在
server.js
中。那么
html=await renderer.renderToString（上下文）将如何处理呢router.express.js
中，路由是否有效？或者更确切地说，我如何使用
server.js
的
渲染器而不是它自己的渲染器使它们工作？