0

我一直在努力遵循这个Vue SSR 指南，在那个例子中，作者将他的 Express 路由放在一个名为server.js. 仅出于组织目的，我希望将我的 Express 路由保存router.express.js在我的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，以便 Express 路由像这样工作：

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包含在路由中，那么包括我的开发环境在内的一切都可以完美运行。

为什么我不能（或者更确切地说我怎么能）将我的 Express 路由保存在一个单独的文件中，并且仍然可以让这些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;
4

1 回答 1

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”或“client-entry-js”有关

于 2020-04-10T21:11:52.113 回答