将 Vue.js 与 Nunjucks 一起使用

Question

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

索引.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 中使用。如果有可能做我想做的事，有人吗？

Answer 1

原来 webpack 正在解析为 Vue 的运行时版本。如果我添加一个别名属性以指向 vue.esm.js 一切正常

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