django 和 vue.js 生产错误：在 django 中运行 npm build 和链接静态文件后没有显示

Posted 2023-02-23

技术标签:

【中文标题】django 和 vue.js 生产错误：在 django 中运行 npm build 和链接静态文件后没有显示【英文标题】：django and vue.js production error:nothing shows up after runinng npm build and linking static files in django 【发布时间】：2020-05-08 22:00:14 【问题描述】：

我已经使用 webpack 加载器将 django 连接到 vue 在运行命令之前 npm build 一切都很好，通过运行两个终端一切正常，但是在运行该命令并连接静态文件之后，当我尝试检查 localhost:8000（默认 django 服务器）时，我什至在控制台中都看不到任何东西错误，什么都没有

这是我的 base.html 文件

!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Question Time</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
        % block style %
        % endblock %
    </head>
    <body>
        % block content %
        % endblock %


    </body>
    % block js %
    % endblock %
</html>

这是我的 index.html

% extends "base.html" %
% load static %
% block style %
<link rel="stylesheet" href="% static 'bundle.css' %">
% endblock %


% block content %
<noscript>
    <strong>We're sorry but frontend doesn't work properly without javascript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
% endblock %

% block js %
<link rel="stylesheet" href="% static 'bundle.js' %">
% endblock %

我已经尝试从 vue 中删除 dist 文件夹我已尝试删除导致此问题的所有静态链接，但它没有用 https://***.com/questions/47034452/how-to-run-production-site-after-build-vue-cli 也试过这个解决方案但还是没用

【问题讨论】：

【参考方案1】：

你需要添加 % load render_bundle from webpack_loader %

!DOCTYPE html>
% load render_bundle from webpack_loader %
<html lang="en">
...

【讨论】：

以上是关于django 和 vue.js 生产错误：在 django 中运行 npm build 和链接静态文件后没有显示的主要内容，如果未能解决你的问题，请参考以下文章

学习随笔:Vue.js与Django交互以及Ajax和axios

ERR_CONNECTION_REFUSED 与 Django 和 Vue.js 捆绑文件

我如何使用 Django + Vue.js 快速构建项目

Heroku/Django：没有名为 dj_database_url 的模块

尝试在 Django 应用程序的 js 文件中导入 vue.js 时出现“未捕获的语法错误：无法在模块外使用 import 语句”

Django Rest 框架、CSRF 和 Vue.js