Использование Vue.js с Nunjucks

Question

В моей компании есть система сборки для статических сайтов, использующая nunjucks для рендеринга html. Я хотел бы добавить Vue.js для создания прототипа. Я не хочу использовать nunjucks в моих шаблонах Vue. У меня есть страница index.njk, к которой я хотел бы добавить Vue. Когда я запускаю команду, которая обслуживает страницы, все строится просто отлично, но я не получаю вывод от Vue.

Index.njk

{% block content %}
<main class="wrapper">
    <div class="prod-switcher">
        <prod-tabs></prod-tabs>
    </div>
</main>
{% endblock %}

Я тогда использую .prod-switcher как el для Vue. Система сборки использует Express для сервера с промежуточным программным обеспечением Webpack для перезагрузки горячих модулей. Так что в файле server.js есть этот бит.

files.forEach(fileName => {
            app.get(`/${fileName.replace('njk', 'html')}`, function(req, res) {
                const data = getDataFile(fileName);
                return res.render(fileName, data);
            });
        });

Это просто ищет все njk файлы и рендеринг их. На самом деле ничего не выводится в файловую систему. Когда я смотрю на страницу в браузере, я вижу, что .prod-switcher элемент ушел, но это то, что на его месте.

<main class="wrapper">
    <!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
</main>

Vue-loader используется в веб-пакете. Кто-нибудь, если можно сделать то, что я пытаюсь сделать.

Answer 1

Оказывается, веб-пакет преобразовывался во временную версию Vue. Если я добавлю псевдоним, чтобы указать vue.esm.js все работает

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    }
}