重写Django模板时使用本地Chart.js渲染图表失败如何解决

原来使用CDN链接可正常加载，是因为CDN资源属于外部可访问的公共路径，不需要从你的Django服务获取资源。
你将静态JS文件放在templates目录是错误的存储方式：Django的templates目录仅用于存储待渲染的HTML模板，不对外提供静态资源（JS/CSS/图片等）的访问服务。你直接打开本地HTML文件时走的是本地文件协议，可直接读取同目录下的JS文件；但通过Django服务访问时，浏览器发起的对Downloaded_CHART_JS_script.js的请求会被Django判定为无效路径，返回404错误，导致图表无法渲染。

• 步骤1：调整静态文件存放路径
  在Django项目根目录或对应APP目录下创建名为static的文件夹，将你本地的Downloaded_CHART_JS_script.js移动到该static文件夹内。
• 步骤2：确认静态文件配置
  打开项目settings.py，检查以下配置项：

# 确保已启用静态文件应用
INSTALLED_APPS = [
    # 其他应用
    'django.contrib.staticfiles',
]

# 配置静态文件访问路径前缀
STATIC_URL = '/static/'

• 步骤3：修改模板中的JS引用方式
  在你的HTML模板文件顶部首先加载静态文件标签，再修改script标签的引用路径：

<!-- 模板最顶部添加这行加载静态文件标签 -->
{% load static %}

<!-- 替换原来的script引用 -->
<script src="{% static 'Downloaded_CHART_JS_script.js' %}"></script>

如果修改后仍无法加载，按以下顺序检查：

• 启动Django服务后按F12打开浏览器开发者工具，查看「网络」标签中该JS文件的请求状态，若为404则检查文件名拼写是否正确、static文件夹下的文件路径是否匹配
• 若你将static文件夹建在单个APP目录下，需确保该APP已添加到INSTALLED_APPS列表中
• 生产环境部署时需额外执行python manage.py collectstatic命令收集所有静态文件到统一目录

内容的提问来源于stack exchange，提问作者Xiqian Zheng