djangoを使ったVuejsアプリケーションの開発とデプロイ

私は、のwebpackでデフォルトのコマンドで実行していたVuejsのかなり単純なWebアプリケーションを作成しました。私がdjango-rest-frameworkを使って構築したDjangoからのAPIを利用していました。また、Vueアプリに変更があった場合は、自動的にホットリロードされます。これはかなり素晴らしいものです。djangoを使ったVuejsアプリケーションの開発とデプロイ

今、webpackの代わりにdjangoを使用してVueアプリを実行したいと思います。つまり、DjangoはHTMLテンプレートファイルで応答し、Vuejsアプリケーションはその単一のページアプリケーションのhtmlファイルで実行されます。

私が今やっていることは最初にこのコマンドを実行している：

npm run build

その後、私はジャンゴ静的フォルダにDIST/静的/フォルダのファイルをコピーします。私はVueのアプリを変更する必要がある場合、私は、もう一度それを構築するファイルをコピーし、内部でそれをロードする必要があり、後に今

index.htmlを

{% load static %} 
<!DOCTYPE html> 
<html> 
<head> 
    ... 
    ... 
    <link href="{% static "css/app.e446b60204fec1f9f5510c711523ffca.css" %}" rel=stylesheet> 
</head> 
<body> 
<div id="app"></div> 

<script src="{% static "js/manifest.88376ea5d07804f39ff7.js" %}"></script> 
<script src="{% static "js/vendor.e0e5105739e9947a23e7.js" %}"></script> 
<script src="{% static "js/app.571e9140518a5bae898c.js" %}"></script> 
</body> 
</html>

：そして最後に、テンプレートにロードテンプレート、かなり長いようです。

だから、私はDjangoとVuejsの両方を混在させる方が良い、短期的な方法が望まれます。

出典

2017-03-17 Robin

私は、 'npm run build'を変更して、ファイルを静的静的フォルダに入れることを考えています。これらをdist/staticフォルダに入れてから転送するのは本当に効果がないからです。生成されたファイル名が常に同じではないのはなぜか分かりません。つまり、テンプレートをまったく変更する必要はありません。私は自分自身を見るためにはむしろ新しいですが、これが役立つことを願っています！ –

@ChristopherShrobaに加えて、['django-webpack-builder']（https://github.com/owais/django-webpack-loader）が役立つかもしれません。 –

@ChristopherShrobaはい、それはそれを行う方法の1つだと思います。しかし、あなたはbulidファイルの名前をどのように扱っていますか？ – Robin

ここでは、Djangoテンプレート内でVueアプリケーションを実行する方法について説明している素晴らしい記事があります。

https://ariera.github.io/2017/09/26/django-webpack-vue-js-setting-up-a-new-project-that-s-easy-to-develop-and-deploy-part-1.html

これはかなりVUE-CLIを提供する最新のVueのアプリテンプレートを使用して、すべてを実行する方法について説明します。追加のパッケージは、テンプレート内のjsパッケージをレンダリングするdjango-webpack-loaderと、djangoアプリケーション内でホットモジュール置換を可能にするwebpack-bundle-trackerです。

webpack/djangoの静的ファイルを使って、どこからでもvueアプリケーションを実行し、目的に合った場所に静的ファイルを構築できます。

django-webpack-loaderにrender_bundle関数をラップするためのカスタムテンプレートタグを書くことがもう1つのステップでした。 WebPACKの持つ生産ビルド後にアプリを提供するには、含める必要があります。WebPACKのdevのサーバーからアプリを提供する際

{% render_bundle 'manifest' %} 
{% render_bundle 'vendor' %} 
{% render_bundle 'app' %}

これはエラーがスローされます。その例外をキャッチすると、自動的に失敗する可能性があり、devサーバーのすべてのメリットを逃すことができます。例えば。

from webpack_loader import utils 
from webpack_loader.exceptions import WebpackBundleLookupError 
from django.utils.safestring import mark_safe 

@register.simple_tag 
def render_bundle(bundle_name, extension=None, config='DEFAULT', attrs=''): 
    try: 
     tags = utils.get_as_tags(bundle_name, extension=extension, config=config, attrs=attrs) 
    except WebpackBundleLookupError as e: 
     return'' 
    return mark_safe('\n'.join(tags))

出典

2017-10-17 08:53:34 brianf

djangoを使ったVuejsアプリケーションの開発とデプロイ

答えて

関連する問題