django를 이용한 Vuejs 앱 개발 및 구축
나는 Vuejs에서 디폴트로 실행되던 꽤 간단한 웹 앱을 만들었다.npm run dev웹팩으로 명령하다부에 앱은 내가 만든 장고 API를 장고 레스트프레임으로 활용하고 있었다.그리고 Vue 앱에 변경 사항이 있을 때마다 자동으로 핫로딩이 되는데, 이것은 꽤 멋진 일이다.
이제 나는 웹팩 대신 짱고를 이용한 부에 앱을 실행해보고 싶어.무슨 말인가 하면 장고가 html 템플릿 파일로 응답하고, 부에즈 앱은 그 html 파일에서 한 페이지 애플리케이션으로 실행된다는 것이다.
내가 지금 하고 있는 것은 먼저 다음 명령을 실행하는 것이다.
npm run build
그런 다음 dist/static/folder 파일을 django static 폴더에 복사한다.마지막으로 템플릿에 로드:
인덱스.포인트
{% 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 템플릿 내에서 Vue 앱을 실행하는 방법을 설명하는 훌륭한 기사가 있다.
vue-cli와 함께 제공되는 최신 Vue 앱 템플릿을 사용하여 모든 것을 실행하는 방법을 거의 설명해주지 않는다.사용된 추가 패키지는 템플릿에서 js 패키지를 렌더링할 수 있는 django-webpack-loader와 django 앱 내에서 Hot Module Replacement가 가능한 webpack-bundle-tracker이다.
웹팩/django 정적 파일을 설정해 어느 위치에서든 vue 앱을 실행하고 목적에 맞는 위치에 정적 파일을 빌드할 수 있다.
내가 추가로 취한 한 단계는 렌더_번들 함수를 django-webpack-loader로 포장하는 사용자 지정 템플릿 태그를 작성하는 것이었다.웹 팩을 사용한 프로덕션 빌드 후 앱을 서비스하려면 다음을 포함해야 한다.
{% render_bundle 'manifest' %}
{% render_bundle 'vendor' %}
{% render_bundle 'app' %}
이것은 웹팩 개발 서버에서 앱을 제공할 때 오류를 발생시킬 것이다.그 예외를 잡는 것은 그것이 조용히 실패할 수 있도록 할 것이고 당신은 개발 서버의 모든 이점을 가지고 발전할 수 있을 것이다.예를 들어
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))
참조URL: https://stackoverflow.com/questions/42863458/developing-and-deploying-vuejs-app-with-django
'IT이야기' 카테고리의 다른 글
| Vue.js의 헤더 및 바닥글 구성 요소 (0) | 2022.04.16 |
|---|---|
| 공유 라이브러리를 구축할 때 -fPIC는 무엇을 의미하는가? (0) | 2022.04.16 |
| 부트스트랩 Vue 편집 가능 테이블 열 (0) | 2022.04.16 |
| C: 구조 정의에서 구조체에 대한 포인터 (0) | 2022.04.16 |
| java.sql에서 쿼리 가져오기.PreparedStatement (0) | 2022.04.16 |