Как запустить скомпилированный vue проект в django - PullRequest
Новая
       2

Как запустить скомпилированный vue проект в django

7 голосов
/ 04 августа 2020

Раньше я знал, как запускать Vue и Django (шаблон jinja2) вместе. обрабатывая настраиваемые разделители, например delimiters: ['[[', ']]'].

Но по какой-то причине моему руководителю просто нужно запустить скомпилированный проект vue внутри моего существующего django проекта . Как мы видим, vue имеет npm run serve или yarn run serve для его запуска.

Может ли django справиться с этим случаем? Если да, что мне делать?

В этом случае мы не используем прямой веб-сервер, например nginx, apache, et c для запуска.

Ответы [ 2 ]

3 голосов
/ 07 августа 2020

Чаранджит Сингх ответ правильный, и ваша проблема 404 не связана с vueJs. Поскольку вы не используете прямой веб-сервер, вы усложняете задачу.

Также, если ваше приложение vue реализует vue -маршрутизатор в режиме истории, это вызовет еще больше проблем, поскольку вы не используете ни nginx, ни apache. Мой единственный подход для этого - Haproxy , который заставит ваше дополнительное приложение обрабатывать эти маршруты.

Например, ваш домен приложения - myawesomedomain.com, а ваше приложение vue - myawesomedomain.com/myvueapp тогда вам нужно настроить Haproxy, чтобы ваш vueapp обрабатывал все маршруты в myawesomedomain.com/myvueapp/*.

Если у вас нет vue -маршрутизатора в вашем приложении, вам нужно поместить эту vueapp папку в развернутой веб-папке и не забудьте добавить правило маршрутизации для вашего файла html (я не знаю насчет Django, но я сделал это с symfony, и он работает) 

Deployed
|
|_vueapp    ===> your compiled folder
|
|_htmlFile  ===> your html file
0 голосов
/ 14 августа 2020

Наконец, это то, над чем я работал. Скомпилированный файл index.html кладу из dist/index.html в templates/vueapp/index.html (django папка шаблонов) . Остальные файлы и папки помещаются в папку static/.

  1. templates/vueapp/index.html => скомпилированный файл html.
  2. static/vueapp/ (включает: css, js, fonts, и т.д. c) . => скомпилированные vue стати c файлы.

мой views.py; 

from django.views.generic import TemplateView


class VueAppView(TemplateView):
    template_name = 'vueapp/index.html'

и мой urls.py; 

from django.contrib import admin
from django.urls import (path, include)
from my_app.views import (HomeTemplateView, VueAppView)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', HomeTemplateView.as_view()),
    path('vueapp/', VueAppView.as_view()),
]

также внутри vueapp/index.html. Как мы видим, я изменил исходный код /static/vueapp/ и связался с папкой stati c. 

<!DOCTYPE html>
<html lang=id>
  <head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/static/vueapp/favicon.ico>
    <title>siap-ums</title>
    <link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel=stylesheet href="https://fonts.googleapis.com/css?family=Material+Icons">
    <link href=/static/vueapp/css/chunk-01c619b4.ff54e24d.css rel=prefetch>
    <link href=/static/vueapp/css/chunk-308637dc.e4c5f763.css rel=prefetch>
    <link href=/static/vueapp/css/chunk-616b136f.404f3685.css rel=prefetch>
    <link href=/static/vueapp/js/app.876efdb8.js rel=preload as=script>
    <link href=/static/vueapp/js/chunk-vendors.2b11f5ad.js rel=preload as=script>
    <link href=/static/vueapp/css/chunk-vendors.a6a7bf01.css rel=stylesheet>
  </head>
  <body>
    <noscript><strong>We're sorry but siap-ums doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div id=app></div>
    <script src=/static/vueapp/js/chunk-vendors.2b11f5ad.js></script><script src=/static/vueapp/js/app.876efdb8.js></script>
  </body>
</html>

Каждый раз, когда в vueapp вносятся изменения, я должен сначала скомпилировать его и сделайте тот же шаг, что и выше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...