2017-09-28 6 views
0

私はDjangoプロジェクトを立ち上げ、それに合わせてVueフロントエンドを開発したいと考えています。 Vueアプリを設定するには、vue init webpack myproject-frontendを使用しました。両方を別々に開発するのは、それぞれpython manage.py runservernpm run devを使用するとかなり簡単です。Djangoを使ってwebpack'ed(Vue)アプリを提供するにはどうすればよいでしょうか?

私のDjangoプロジェクトの1ページ内にアプリを置くのも簡単です。 の場合最初にnpm run buildを使用してVueアプリを構築します。明らかに、それは遅いという欠点があります。さらに、私はハッシュを含むファイル名(もちろん自動化が可能です)に注意を払わなければなりません。

についてnpm run devについては、私はブラウザー内のVueアプリだけを見ることができて満足していません。私はまだAPI(CORSの世話をする)と通信することができますが、それはウェブサイトが最終的にどのように見えるかではありません。私は、同じページに複数のVueコンポーネントを配置し、異なるページ上の異なるコンポーネントを1つのポイントに配置する予定です。これはdevには反映されません。

アプリケーションのDjango部分を省略しないという忠実性を維持しながら、常に再構築する必要がないという迅速性をどのように達成できますか?


私はdevによって提供されているものを見てみましたが、私はWebPACKのその外のアプローチを推定するために使用ツールにすぎ新たなんです。 FWIW、これは私が見てどのようである:

  • /app.js自体はいくつかのブートストラップ、ライブラリとアプリケーション・コードをwebpack'ingの結果であると思わ:​​見て

    • 、私はこれを参照してください。しかし、そのファイルには、私のファイルシステムにどこにもありませんので、私はそれが何らかの形でDjangoのサーバを経由してアプリのdevバージョンを提供することが可能ですかどうか

  • +0

    私は後で明白な解決策を見つけるには時間がかかりすぎたので、残りの世界でこれを投稿しています。私はまだCORSのないソリューションがあれば興味があります! –

    答えて

    0

    ...ジャンゴからそれを果たすことができない(つまり、ポート8000​​上のデフォルトの場合8080の代わりに)、私は知らない。

    ただし、DjangoのWebサイトに統合することはできません。必要だすべてはlocalhost:8080/のソースに表示されている:

    そしてHTMLのこの部分には、Djangoの静的なディレクトリにdistファイルを置くとほぼ同じことを達成することに、Djangoによって提供することができます - の違いは、ポートであることと、したがって、CORS:

    <div id="app"></div> 
    <script type="text/javascript" src="http://localhost:8080/app.js"></script> 
    
    関連する問題