Vue-серверный рендеринг: приложение не было регидратировано, ошибка не была сброшена

Question

У меня есть рабочее приложение Vue в моем каталоге dist: при обслуживании сервером все работает нормально.

Когда я пытаюсь добавить рендеринг на стороне сервера с помощью vue-server-renderer, он не работает. Страница загружается, но она не переводится правильно: большинство слушателей событий не добавлено.

Ошибок не возникает. Я использую автономную сборку, Vue 2.1.3 и vue-server-renderer 2.1.3. NODE_ENV настроен на разработку.

Вот мой код сервера:

require('dotenv').config(); 

const fs = require('fs'); 
const path = require('path'); 

const layout = fs.readFileSync('./dist/index.html', 'utf8'); 

const contentMarker = '<div id="app"></div>'; 
const contentIndex = layout.indexOf(contentMarker); 
const layoutHead = layout.slice(0, contentIndex); 
const layoutTail = layout.slice(contentIndex + contentMarker.length); 

const express = require('express'); 
const server = express(); 

server.use('/static', express.static('./dist/static')); 

const bundle = fs.readFileSync('./dist/static/js/app.js', 'utf-8'); 
const renderer = require('vue-server-renderer').createBundleRenderer(bundle); 

server.get('*', (req, res) => { 
    res.setHeader('Content-Type', 'text/html'); 

    const renderStream = renderer.renderToStream({ url: req.url }); 

    renderStream.once('data',() => { 
    res.write(layoutHead); 
    }); 

    renderStream.on('data', chunk => { 
    res.write(chunk); 
    }); 

    renderStream.on('end',() => { 
    res.end(layoutTail); 
    }); 

    renderStream.on('error', err => { 
    if (err && err.code === '404') { 
     res.status(404).end('404 | Page Not Found'); 
     return; 
    } 

    res.status(500).end('500 Error'); 
    console.error(err); 
    }); 
}); 

server.listen(8080, (err) => { 
    if (err) { 
    throw err; 
    } 

    console.log('Server is running at http://localhost:8080/'); 
}); 

Answer 1

Я понял это: в этом случае, проблема заключалась в том, что contentMarker должен был <div id=app></div>, без кавычек: HTML, в настоящее время минимизирован путем WebPack.

Результатом этого не является то, что весь файл макета был выведен, а затем визуализированный шаблон Vue: это означало, что Vue JS загружался перед шаблоном, поэтому не было документа для регидратации.

Возможно, предупреждение было полезным!