如何将我的 Vue js SPA 部署到我的 Django 服务器中?
Posted
技术标签:
【中文标题】如何将我的 Vue js SPA 部署到我的 Django 服务器中?【英文标题】:How do I deploy my Vue js SPA into my Django server? 【发布时间】:2019-07-06 04:55:50 【问题描述】:我目前正在按照本指南将我的 Vue.js 前端与我的 Django 后端集成:https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c4bd2b37aa70
现在,我只想能够将默认的 Vue.js 样板 index.html 页面渲染到我的 Django 服务器 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')),
]
根据指南,当我运行 python manage.py runserver
时,我应该已经在 http://localhost:8000/ 上看到了 Vue.js index.html 页面,但是除了白屏之外什么都没有呈现,当我检查控制台时,我被轰炸了错误 404s 如图here.
Django 似乎能够找到我的 index.html,但它无法找到并导入使其 SPA 功能正常工作所需的 css 和 js 文件。
【问题讨论】:
你能添加你的 index.html 吗? 【参考方案1】:您必须手动配置 确保在 index.html 的顶部必须有:
% load static %
然后所有链接看起来像:
<script src="% static "app.d34dcca9.js" %"></script>
与 css 文件或图像相同。
【讨论】:
【参考方案2】:你也可以通过以下设置vue.config.js
来解决这个问题:
module.exports =
assetsDir: 'static',
【讨论】:
以上是关于如何将我的 Vue js SPA 部署到我的 Django 服务器中?的主要内容,如果未能解决你的问题,请参考以下文章