Question

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

现在，我只想将默认的Vue.js样板index.html页面呈现到位于http://localhost:8000/的Django服务器中

我使用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')),
]

根据指南，当我运行python manage.py runserver时，我应该已经在index.html上看到了Vue.js http://localhost:8000/页面，但是除了白屏和检查控制台外，什么都没有呈现，我被错误404轰炸，如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服务器中？

2 个答案: