2017-06-01 9 views
2

Vue.js v2/webpackで構築されたDjango SPAがあります。Djangoの静的ファイルを取得するには、Vue.js .vueテンプレート内での作業が含まれています

Vue.jsテンプレート.vueのファイル内に、画像などへの参照を追加するためにDjangoの静的テンプレートタグを使用したいと考えています。

{% load static %} 
{% load render_bundle from webpack_loader %} 
<html> 
    <head> 
     <!-- This works fine here! --> 
     <link rel="stylesheet" href="{% static 'css/test.css' %}" /> 
     ... 
    </head> 
    <body> 
     <div id="app"> 
     <!-- Vue.js app gets mounted here --> 
     </div> 
    </body> 
</html> 

、それはもちろん、私はSPA(単一ページのアプリケーション)で使用するHTMLページです:Djangoのための私のbase.htmlテンプレートで今

しかし、私はそうのような私.vueテンプレートファイルに静的なタグを使用してみてください:

{% static 'js/test.js' %} 

それは動作しません - もちろん、Djangoは、サーバー側で、Vueのは、クライアント - であるため、それが補間されることは決してありません側。

私は静的ファイルに別のストレージバックエンドを使用するので、私はstaticfilesタグ(とないハードリンク)を使用して保存しておきたい、メディア、さらにはローカル/ステージング/ PROD環境から。

これをDjango/Vue.jsでどのように処理するかについてのアイデアはありますか? staticfilesをテンプレートのクライアントサイドにリンクさせるには、ここで良い解決策はありますか?

答えて

-1

良い解決策はありますか?職務の分離なぜDjangoのテンプレートはまったく関わっているのですか?フロントエンドコードはすべてのレンダリングを処理できます。あなたのバックエンドは、残りのAPIエンドポイントを提供することができます。

+0

ほとんど答えはありません。前にDjangoを使ったことがありますか?静的URLへのマッピングは非常に重要です。 – lollercoaster

+0

今はそれだけではあるアプリケーションに取り組んでいる - Djangoにフロントエンド上のバックエンドとVuejsに。 Djangoの部分はレンダリングに全く関係しません。私はDjangoテンプレート、静的ファイルなどを使用していません。すべてのレンダリングは、フロントエンドのVuejsコードで処理されます。私の唯一のポイントは、Djangoテンプレートを使用するかどうかの疑問を質問することでした。 –

+0

イメージのような静的資産にどのようにリンクしますか?ユーザーがアップロードしたファイルですか? – lollercoaster

関連する問題