NunjucksでVue.jsを使用

Question

私の会社には、HTMLレンダリングにnunjucksを使用する静的サイト用のビルドシステムがあります。いくつかのプロトタイピングを行うためにVue.jsを追加したいと思います。私は私のVueテンプレートでnunjucksを使用したくありません。私はVueを追加したいindex.njkページを持っています。ページを提供するコマンドを実行すると、すべてがうまく構築されますが、Vueからの出力は得られません。

Index.njk私は、Vueのためのelとして.prod-switcher使用

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

。ビルドシステムでは、ホットモジュールリロード用のwebpackミドルウェアを使用してサーバ用にexpressを使用しています。したがって、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> 

webpackでVue-loaderが使用されています。もし私がしようとしていることをすることが可能なら誰でもしますか？

Answer 1

ウェブパックはVueのランタイムバージョンに解決されました。 vue.esm.jsを指すエイリアスプロパティを追加すると、すべてが機能します

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