Django 3.0.8站点在Xubuntu 20.04显示异常，Windows端运行正常

问题基本信息 #

• 项目运行基础：基于Django 3.0.8 + Python 3.8开发，在Windows 10设备上运行时页面渲染完全正常，正常效果可参考Windows端渲染预览
• 跨端异常表现：将完全一致的代码、项目文件、Python运行环境部署到搭载Xubuntu 20.04的旧设备后，页面样式完全错乱，初判为Bootstrap、FontAwesome静态资源未正常加载，异常效果可参考Xubuntu端异常渲染预览
• 参考模板核心逻辑：
  1. 公共基础模板page.html：全局加载i18n、静态资源、bootstrap5模板标签，依次引入本地静态目录下的Bootstrap CSS、自定义全局样式、FontAwesome CSS，全局配置导航栏结构、公共内容容器，底部引入jQuery、Popper、Bootstrap JS依赖，核心代码片段：

     {% load i18n %}
     {% load static %}
     {% load bootstrap5 %}
     <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
     <link href="{% static 'css/styles.css' %}" rel="stylesheet">
     <link href="{% static 'css/fontawesome.css' %}" rel="stylesheet">
     <script src="{% static 'vendor/jquery/jquery-3.4.1.min.js' %}"></script>
     <script src="{% static 'vendor/popper/popper.min.js' %}"></script>
     <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
     

  2. 登录页内容块：继承公共基础模板，使用bootstrap_form标签渲染登录表单，挂载密码找回、账号找回等入口链接，核心代码片段：

     {% extends 'layouts/default/page.html' %}
     {% block content %}
     <div class="center-etroit" style="max-width:500px;">
         <div class="card">
             <!-- 登录卡片、表单、操作链接结构 -->
         </div>
     </div>
     {% endblock %}
     

核心异常原因分析 #

由于项目代码、运行依赖版本完全一致，Django模板渲染逻辑本身不存在跨平台差异，所有异常均可定位到Linux与Windows环境的固有差异点：

• 静态资源路径大小写不匹配
  Xubuntu 20.04默认使用的ext4文件系统对文件路径大小写严格敏感，而Windows NTFS文件系统对路径大小写不敏感。如果代码中定义的静态资源引用路径，和Linux服务器上实际存储的文件名、目录名大小写不一致——比如代码引用路径为vendor/bootstrap/css/bootstrap.min.css，但实际目录结构是Vendor/Bootstrap/CSS/Bootstrap.min.css，Windows上可正常加载资源，Linux端会直接返回404，导致Bootstrap、FontAwesome样式完全失效，页面退化为无样式的纯HTML结构。
• 静态资源读取权限不足
  如果项目是从Windows端打包后传输到Xubuntu设备，解压过程中可能出现文件权限丢失，导致静态目录下的CSS、JS、字体文件仅所有者拥有读权限，运行Django服务的普通系统用户无法读取这些文件，进而出现资源加载失败。
• 静态资源服务配置未适配生产环境
  如果Linux端部署时设置DEBUG=False的生产模式，Django本身不会主动提供静态资源访问服务，若未正确配置Nginx等Web服务器指向静态资源目录，或者collectstatic收集静态资源时路径配置错误、权限不足，都会导致所有样式、JS资源无法被正常访问。
• FontAwesome字体文件相对路径引用错误
  FontAwesome的CSS文件内部会通过相对路径引用同目录下的woff/ttf格式字体文件，如果自定义的fontawesome.css内部引用路径存在大小写不匹配、相对路径偏移问题，Linux端会无法加载字体文件，导致图标显示为方块，进一步加剧样式错乱的表现。

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