使用 VueJS 和 Django 时的空白页答案

【问题标题】：Blank page when using VueJS and Django使用 VueJS 和 Django 时的空白页
【发布时间】：2019-12-17 20:01:10
【问题描述】：

我最近在 this guide 之后将 VueJS 添加到我的 Django 项目中。

我正在尝试运行此模板，以检查一切是否正常：

{% load render_bundle from webpack_loader %}
<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Django Vue Integration</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">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
<div id="app">
     <app></app>
 </div>
{% render_bundle 'app' %}
<!-- built files will be auto injected -->

</body>
</html>

它应该只呈现默认的 VueJS 页面。问题是当我使用manage.py runserver 运行Django 时，我只会在http://127.0.0.1:8000/ 上看到一个空白页。我在我的 cmd 控制台中没有收到任何错误，但在我的开发工具中我发现了这个错误：

GET http://127.0.0.1:8000/app.js net::ERR_ABORTED 404 (Not Found)
<script type="text/javascript" src="http://127.0.0.1:8000/app.js" ></script>

【问题讨论】：

您是否像文章中一样包含了 vue.config.js 文件？我使用他的代码让它工作没有问题，但是当我尝试将它移植到我打算在产品中部署的我自己的项目中时，我遇到了同样的问题。我确实看到的一个问题是，在将支持映射到 :8000 后，lodash 模板语法没有为 favicon 插入
您需要同时运行两个服务器并安装 django-cors-headers 并在 settings.py 中将您的 vuejs 列入白名单（均在其网站上进行了解释）

标签： javascript django vue.js frontend

【解决方案1】：

尝试同时运行两台服务器，即：

Django：python manage.py runserver

Vue：npm run dev

【讨论】：