如何在 django 中运行已编译的 vue 项目
[英]How to run compiled vue project in django
问题描述
Previously, I know how to run Vue and Django (jinja2 template) together.
以前，我知道如何同时运行Vue和Django（jinja2 模板） 。
by handling the custom delimiters, eg delimiters: ['[[', ']]'] .通过处理自定义分隔符，例如delimiters: ['[[', ']]'] 。
But for some reason, my supervisor just need to run the compiled vue project inside my existing django project .但是由于某种原因，我的主管只需要在我现有的 django 项目中运行已编译的 vue 项目。 As we can see, the vue has npm run serve or yarn run serve to run it.我们可以看到，vue 有npm run serve或yarn run serve来运行它。
Does django can handle this case? django 可以处理这种情况吗？ If yes, what I should do?如果是，我应该怎么做？
In this case, we doesn't use direct web server like nginx , apache , etc to run.
2 个解决方案
解决方案1
3 2020-08-07 11:13:21
Charanjit Singh answer is correct and your 404 problem is not related to vueJs. Charanjit Singh的答案是正确的，您的 404 问题与 vueJs 无关。 Since you are not using a direct web server you are making it harder.由于您没有使用直接的 web 服务器，因此您将变得更加困难。
Also If your vue application implements vue-router in history mode that'll cause even more problems since you're not using neither nginx or apache.此外，如果您的 vue 应用程序在历史模式下实现 vue-router，这将导致更多问题，因为您既没有使用 nginx 也没有使用 apache。
My only approach for this is Haproxy that'll make your sub application handle those routes.我唯一的方法是Haproxy ，它会让你的子应用程序处理这些路由。
For example your app domain is myawesomedomain.com and your vue app is in myawesomedomain.com/myvueapp then you need to configure your Haproxy to let your vueapp handle all routes in myawesomedomain.com/myvueapp/* .例如，您的应用程序域是myawesomedomain.com并且您的 vue 应用程序位于myawesomedomain.com/myvueapp中，那么您需要配置您的 Haproxy 以让您的 vueapp 处理myawesomedomain.com/myvueapp/*中的所有路由。
If you don't have a vue-router in your app then you need to place th vueapp folder in your deployed web folder and don't forget to add a routing rule for your html file (I don't know about Django but I did it with symfony and it is working)如果您的应用程序中没有 vue-router，那么您需要将vueapp文件夹放在已部署的 web 文件夹中，并且不要忘记为您的 html 文件添加路由规则（我不知道 ZEF06F93C83E4D17478用 symfony 做的，它正在工作）
Deployed
|
|_vueapp ===> your compiled folder
|
|_htmlFile ===> your html file
解决方案2
0 2020-08-14 09:24:57
Finally, this is what I've been working on.最后，这是我一直在努力的。 I put the compiled index.html file from dist/index.html to templates/vueapp/index.html (django templates folder) .我把编译好的index.html文件从dist/index.html放到templates/vueapp/index.html （django 模板文件夹） 。 The other files & folders is put inside static/ folder.其他文件和文件夹放在static/文件夹中。
-
templates/vueapp/index.html=> the compiledhtmlfile.templates/vueapp/index.html=> 编译后的html文件。 -
static/vueapp/(includes:css,js,fonts, etc) .static/vueapp/（包括：css、js、fonts等） 。 => the compiled vue static files.=> 编译后的 vue static 文件。
my views.py ;我的views.py ;
from django.views.generic import TemplateView
class VueAppView(TemplateView):
template_name = 'vueapp/index.html'
and my urls.py ;和我的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()),
]
also inside the vueapp/index.html .也在vueapp/index.html里面。 As we can see, I modified the source of /static/vueapp/ and linked to the static folder.如我们所见，我修改了/static/vueapp/的源代码并链接到 static 文件夹。
<!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>
Every times the
vueapphave changes, I must compile it first and do the same step as above.vueapp有变化，我必须先编译它，并执行与上面相同的步骤。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.