项目中引入的外部CSS、JS文件无法正常加载该如何解决？

问题排查与解决方法 #

你遇到的是典型的前端静态资源相对路径引用错误问题，按照下面的步骤逐一排查即可：

• 第一步：核对文件层级关系
  你当前使用的./代表相对当前HTML文件所在目录的路径，必须保证你的HTML文件和css、js文件夹处于同级目录下，路径才能生效。如果HTML文件放在下级目录（比如单独的html文件夹），需要把路径改为../css/main.css和../js/main.js，../代表返回上一级目录。
• 第二步：排查大小写问题
  本地Windows、macOS系统对文件名大小写不敏感，但是部署到Linux服务器时会严格区分。检查你的文件夹名是css还是CSS，文件名是main.css还是Main.css，必须和引用路径的大小写完全一致。
• 第三步：通过浏览器开发者工具定位错误
  打开页面后按F12调出开发者工具，切换到「网络」面板，刷新页面后查看css、js文件的请求状态：
  • 如果是404状态码：点击请求条目查看完整的请求URL，和你实际的文件存放路径对比，调整引用路径和实际路径匹配即可。如果是部署在域名的子目录下，可以尝试改用根路径写法/css/main.css，或者在HTML的head标签中添加<base href="/你的项目子目录名称/">统一设置路径基准。
  • 如果是403状态码：说明服务器上的静态资源没有可读权限，给对应文件添加可读权限即可解决。
  • 如果是500状态码：排查服务器的静态资源服务配置是否异常。
• 第四步：框架项目特殊配置
  如果你是用Vue、React等框架开发的项目，需要在打包配置中设置正确的静态资源公共路径（publicPath），否则打包后也会出现资源加载失败的问题。

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