HTML代码在编译器运行无错但部署到网站后script失效怎么办

本地/在线代码运行环境和自有站点部署环境的核心差异集中在路径解析、资源加载规则、服务器配置三个层面，按以下步骤排查即可定位问题：

• 第一步先打开浏览器F12开发者工具，切到「控制台」「网络」面板看红色报错，90%的场景报错信息会直接指明故障点，不需要盲目试错。

常见故障点对应修复 #

1. 资源路径错误 #

• 检查script标签的src引用：不要写file:///开头的本地文件路径，线上环境无法访问本地磁盘资源。如果站点部署在子目录下，不要用/js/xxx.js这类从域名根目录寻址的绝对路径，换成对应层级的相对路径，避免资源404。
• 核对文件名大小写：Windows本地环境、多数在线编译器不区分文件名大小写，但占线上服务绝大多数的Linux系统严格区分大小写，main.js和Main.js会被识别为两个不同文件，直接加载失败。

2. 脚本执行时机不对 #

• 多数在线编辑器会自动把用户写的脚本挪到页面DOM渲染完成后执行，不会主动提示这个处理逻辑。如果你自己的代码把script标签放在了head区域，既没加defer/async属性，也没做DOM加载完成判断，脚本执行时页面元素还没渲染，获取DOM会返回null，直接中断逻辑。
• 修复方式：要么把所有自定义script标签放到</body>标签之前，要么给操作DOM的逻辑套上加载完成监听：

document.addEventListener('DOMContentLoaded', () => {
  // 所有操作页面元素的逻辑写在这里
})

3. 服务器配置拦截 #

• 检查站点的CSP（内容安全策略）配置：如果控制台报Refused to execute inline script类错误，说明服务器返回的CSP头默认禁止内联脚本、非白名单域名的脚本运行。可以把内联脚本挪到独立的js文件引用，或者调整CSP规则添加对应脚本的授权。
• 检查js文件的MIME类型：如果控制台报MIME类型不匹配错误，说明你的主机没有给.js后缀配置正确的MIME值，在主机配置项中给.js后缀添加类型application/javascript即可，部分虚拟主机默认会把js文件当纯文本返回，浏览器不会执行这类资源。
• HTTPS站点不要引用HTTP协议的外部脚本，浏览器会自动拦截这类混合内容，导致外部脚本加载失败，外部资源统一用HTTPS协议或者相对协议引用。

4. 语法兼容问题 #

• 不少在线编译器会自动把ES6+的新语法（比如箭头函数、可选链?.、顶层await）转译成低版本浏览器兼容的写法，线上环境没有这个自动处理环节，如果碰到不兼容的语法，会直接抛出语法错误终止整个脚本执行。对应把报错的语法改成兼容写法，或者配置代码转译即可。

不要跳过看控制台的步骤，所有脚本执行失败的问题，控制台都会打印明确的错误类型、出错代码行号，顺着提示修比挨个试配置效率高10倍。

内容的提问来源于stack exchange，提问作者Heçkır 001