用django開發和部署Vuejs應用程序

我已經在Vuejs中構建了一個相當簡單的web應用程序，該應用程序使用webpack默認的npm run dev命令運行。 Vue應用程序正在使用我使用django-rest-framework構建的Django的api。每當Vue應用程序發生變化時，它都會自動重新加載，這非常棒。用django開發和部署Vuejs應用程序

現在我想運行使用Django代替的WebPack的Vue公司的應用程序。我的意思是說Django會用一個html模板文件作出響應，而Vuejs應用程序將運行在單個頁面應用程序的html文件上。

我現在正在做的事情是第一次運行這個命令：

npm run build

然後我的DIST/靜態/文件夾中的文件複製到Django的靜態文件夾。最後將其加載到模板：

的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>

現在以後，如果我需要改變Vue公司的應用程序，我必須重新構建它，複製文件並加載它裏面的模板，這看起來很長。

所以，我希望能有更好的和短期的方式來混淆兩者Django和Vuejs。

來源

2017-03-17 Robin

我想我會做的是改變'NPM運行build'把文件直接到你的Django靜態文件夾，因爲有真正把他們在dist /靜態的文件夾，然後轉移他們沒有好處。我不確定爲什麼生成的文件名不總是相同的，這意味着你不應該改變你的模板。我自己對Vue很新，但希望這有助於！ –

除了@ChristopherShroba，也許['django-webpack-builder']（https://github.com/owais/django-webpack-loader）可能會幫助你。 –

@ChristopherShroba是的，我認爲這是一種方法。你如何處理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公司的應用程序模板。使用的額外軟件包是django-webpack-loader來呈現模板中的js軟件包，以及webpack-bundle-tracker允許在django應用程序中使用熱模塊替換。

您可以使用設置爲從任何位置運行vue應用程序的webpack/django靜態文件，並將靜態文件構建到適合您目的的任何位置。

一個額外的步驟我真是編寫自定義的模板標籤來包裝render_bundle功能的Django的WebPack裝載機。要經過生產建設與服務的WebPack應用程序，你需要包括：

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

服務從的WebPack開發服務器應用程序時，這將拋出一個錯誤。捕獲該異常將使其失敗，並可以開發開發服務器的所有優勢。例如。

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應用程序

回答

相關問題