Django项目中NPM安装的Chart.js失效，CDN方式可正常运行

问题根源 #

1. 静态文件访问限制：Django不会默认对外暴露node_modules目录，直接用/node_modules/chart.js/dist/chart.js作为脚本路径，浏览器根本无法请求到该文件，自然加载失败。
2. 脚本类型错误：你给script标签设置了type="application/json"，浏览器会把这个文件当成JSON解析，而非JavaScript代码，导致Chart全局变量无法注册。

解决方案 #

步骤1：修正脚本标签的类型属性 #

把script标签的type属性改为text/javascript（或直接省略，现代浏览器默认使用该类型）：

<!-- 错误写法 -->
<script type="application/json" src="/node_modules/chart.js/dist/chart.js"></script>

<!-- 正确写法（后续还要调整路径） -->
<script src="{% static 'chart.js/dist/chart.js' %}"></script>

步骤2：将Chart.js文件迁移到Django静态目录 #

Django仅会访问配置的静态文件目录，需把Chart.js的构建文件复制到项目静态目录中：

1. 确认settings.py中的静态文件配置（如果没有则添加）：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

2. 执行命令复制文件：

cp -r node_modules/chart.js/dist/ static/chart.js/

步骤3：用Django静态模板标签引用文件 #

在模板开头加载static标签，然后正确引用Chart.js：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'chart.js/chart.js' %}"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>
</body>
</html>

验证方式 #

启动Django开发服务器后，打开浏览器开发者工具：

1. 查看「网络」标签，确认chart.js的请求状态为200（加载成功）。
2. 检查控制台是否还存在Chart is not defined的错误。

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