英文:
Inertia Django Vite not working on deployment
问题
我正在尝试将此模板部署到 fly.io（https://github.com/mujahidfa/inertia-django-vite-vue-minimal.git）。此外，我安装了 "gunicorn" 作为 WSGI 服务器。
我在本地运行它没有问题，但是如果我部署它，就会出现跨域错误，因为 Vite 仍然在请求 localhost。我只看到一个空白页面。
index.html：
{% load django_vite %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% vite_hmr_client %}
{% vite_asset 'main.ts' %}
<title>Inertia + Django + Vite + Vue minimal</title>
</head>
<body>
{% block inertia %}{% endblock %}
</body>
</html>
在浏览器中，它被解析为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="http://localhost:5173/static/@vite/client"></script>
<script type="module" src="http://localhost:5173/static/main.ts"></script>
<title>Inertia + Django + Vite + Vue minimal</title>
</head>
<body>
<div id="app" data-page="{"component": "Index", "props": {"name": "World"}, "url": "http://nameless-mountain-1344.fly.dev/", "version": "1.0"}"></div>
</body>
</html>
我认为有趣的部分是：
{% vite_hmr_client %}
{% vite_asset 'main.ts' %}
<script type="module" src="http://localhost:5173/static/@vite/client"></script>
<script type="module" src="http://localhost:5173/static/main.ts"></script>
有人知道如何让它工作吗？我已经试了好几天还是没弄清楚。
我尝试过修改 Dockerfile，但我仍然在全栈开发的早期阶段。
在 vite.config.ts 中，我也尝试了很多方法，但似乎都不起作用。
非常感谢帮助。
更新
多亏了 @dejmedus，我成功部署了模板。但在我的主项目中
{% vite_hmr_client %}
{% vite_asset 'main.ts' %}
仍然解析为
<script type="module" src="http://localhost:5173/static/@vite/client"></script>
<script type="module" src="http://localhost:5173/static/main.ts"></script>
我无法找出错误在哪里。
更新 2
最后，我找到了错误：这是因为我在服务器上将 DEBUG 设置为 True，由于某种原因，这些脚本在这种情况下引用 localhost。如果我将 DEBUG 设置为 False，一切都能正常工作。现在我只需要找出为什么会发生这种情况...
解决方案
DJANGO_VITE_DEV_MODE 被设置为 True。因此，{% vite_hmr_client %} 和 {% vite_asset 'main.ts' %} 被包括并引用到 localhost。我将其设置为 False，一切都按预期工作（感谢 @dejmedus）。
英文:
I'm trying to deploy this template to fly.io (https://github.com/mujahidfa/inertia-django-vite-vue-minimal.git). Additionally I installed "gunicorn" as WSGI-server.
I got it running locally but if I deploy it, I get a CORS-error because Vite ist still requesting localhost. All I see is a white page.
index.html:
{% load django_vite %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% vite_hmr_client %}
{% vite_asset 'main.ts' %}
<title>Inertia + Django + Vite + Vue minimal</title>
</head>
<body>
{% block inertia %}{% endblock %}
</body>
</html>
In the browser it gets resolved to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="http://localhost:5173/static/@vite/client"></script>
<script type="module" src="http://localhost:5173/static/main.ts"></script>
<title>Inertia + Django + Vite + Vue minimal</title>
</head>
<body>
<div id="app" data-page="{&quot;component&quot;: &quot;Index&quot;, &quot;props&quot;: {&quot;name&quot;: &quot;World&quot;}, &quot;url&quot;: &quot;http://nameless-mountain-1344.fly.dev/&quot;, &quot;version&quot;: &quot;1.0&quot;}"></div>
</body>
</html>
I think the interesting parts are:
{% vite_hmr_client %}
{% vite_asset 'main.ts' %}
<script type="module" src="http://localhost:5173/static/@vite/client"></script>
<script type="module" src="http://localhost:5173/static/main.ts"></script>
Has anybody an idea how to get it working? I couldn't figure it out for days now.
I've tried fiddling with the Dockerfile, but I'm still in the eary phase with fullstack-developement.
Also in the vite.config.ts I've tried many things but nothing seems to work.
Help is pretty much appreciated.
UPDATE
Thanks to @dejmedus I could deploy the template successfully. But in my main project
{% vite_hmr_client %}
{% vite_asset 'main.ts' %}
still gets resolved to
<script type="module" src="http://localhost:5173/static/@vite/client"></script>
<script type="module" src="http://localhost:5173/static/main.ts"></script>
and I can't figure out where the error is.
UPDATE 2
Finally I found the error: It didn't work because I had set DEBUG=True on the server and for some reason the scripts refer to localhost in this case. If I set DEBUG to False it works just fine. Now I just have to find out why this is happening...
SOLUTION
DJANGO_VITE_DEV_MODE was set to True. Therefor {% vite_hmr_client %} and {% vite_asset 'main.ts' %} was included and reffered to localhost. I've set it to False and everything worked as expected (Thanks @dejmedus).
答案1
得分: 0
我克隆了模板并按照这个Fly.io教程进行部署，您可以查看一下，看看它是否可以解决问题。
Dockerfile中唯一的更改是将demo.wsgi替换为<name_of_the_project>.wsgi。我不需要修改vite.config。
编辑：在生产环境中应将Debug设置为false，参见这里。然而，这个特定问题似乎在模板中使用的django-vite库中有解释链接。
重要的一点是：“{% vite_hmr_client %}将添加一个<script>标签以包括ViteJS HMR客户端。只有当DJANGO_VITE_DEV_MODE设置为true时，此标签才会包含此脚本，否则不会执行任何操作。” DJANGO_VITE_DEV_MODE在settings.py中设置为DEBUG值。
英文:
I cloned the template and followed this Fly.io tutorial to deploy it, have a look through and see if it can fix the issue.
The only change in the dockerfile was replacing demo.wsgi with <name_of_the_project>.wsgi. I didn't need to touch the vite.config.
Edit: Debug should be set to false in production, see here. However, this particular problem seems to be explained in the django-vite repo the template uses
Important bit: “{% vite_hmr_client %} will add a <script> tag to include the ViteJS HMR client. This tag will include this script only if DJANGO_VITE_DEV_MODE is true, otherwise this will do nothing.” DJANGO_VITE_DEV_MODE is set to DEBUG value in settings.py.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论