将Vue.js与Nunjucks一起使用

Question

我的公司有一个静态网站的构建系统，使用nunjucks来进行html渲染。我想添加Vue.js来做一些原型设计。我不想在我的Vue模板中使用nunjucks。我有一个index.njk页面，我想添加Vue。当我运行为页面提供服务的命令时，一切都很好，但我没有从Vue输出。

Index.njk

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

然后我使用.prod-switcher作为Vue的el。构建系统使用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正在webpack中使用。有没有人，如果有可能做我想做的事。