如何将我的 Vue js SPA 部署到我的 Django 服务器中？

Question

我目前正在按照本指南将我的 Vue.js 前端与我的 Django 后端集成：https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c4bd2b37aa70

目前，我只想能够呈现默认的 Vue.js 样板文件 index.html page into my Django server at http://localhost:8000/

我使用 django-admin startproject django-vue-template 初始化 Django，并在新创建的 django-vue-template 文件夹中，我运行 vue create . 初始化 Vue CLI。然后我运行 npm run build，所以我的项目文件夹树现在看起来像 this。

我也将这些更改添加到我的 settings.py:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'dist')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, 'dist/static'),
]

以及对我的 urls.py 的这些更改：

urlpatterns = [
  path('admin/', admin.site.urls),
  url(r'^$', TemplateView.as_view(template_name='index.html')),
]

根据指南，我应该已经看到 Vue.js index.html page on http://localhost:8000/ when I run python manage.py runserver but nothing renders except a white screen and when I check the console, I'm bombarded with error 404s as shown here。

Django 似乎能够找到我的 index.html，但它无法找到并导入其 SPA 功能所需的 css 和 js 文件。

Answer 1

您必须手动配置 确保 index.html 的顶部必须有 :

{% load static %}

然后所有链接看起来像：

<script src="{% static "app.d34dcca9.js" %}"></script>

与 css 个文件或图像相同。

Answer 2

您也可以通过以下设置解决这个问题vue.config.js:

module.exports = {
  assetsDir: 'static',

如何将我的 Vue js SPA 部署到我的 Django 服务器中？

How do I deploy my Vue js SPA into my Django server?

javascript

python

django

vue.js

vue-cli-3