在Netlify部署结构化Vanilla Web项目，如何解决资源加载失败问题？

问题根源 #

当你将Netlify的Publish directory设为screens时，Netlify会把该目录作为网站的根目录。本地运行时项目根是整个仓库，HTML里的../assets/xxx相对路径能正常定位到上级目录的assets；但部署后网站根变为screens，向上找不到assets文件夹，导致资源加载失败。

方案1：调整Publish目录并配置重写规则（推荐，保留原有路径写法） #

• 将Netlify的Publish directory改为项目根目录（即包含assets和screens的父目录）
• 在项目根目录创建_redirects文件，添加规则：

  /* /screens/home.html 200
  

  该规则会让所有根路径请求指向screens/home.html，同时HTML里的../assets/xxx路径会正常解析为根目录下的assets文件夹。

方案2：修改HTML路径为绝对路径 #

• 将home.html中的资源路径修改为绝对路径：
  把 <link rel="stylesheet" href="../assets/styles.css"> 改为 <link rel="stylesheet" href="/assets/styles.css">
  把 <script src="../assets/scripts.js"></script> 改为 <script src="/assets/scripts.js"></script>
• 将Netlify的Publish directory设为项目根目录，此时绝对路径会直接指向根目录下的assets文件夹
• 若项目部署在Netlify的子路径下（如https://your-site.netlify.app/blog/），需在HTML的<head>中添加base标签：

  <base href="/blog/">
  

方案3：通过构建命令复制资源（不修改目录结构） #

• 保持Netlify的Publish directory为screens
• 在Netlify构建设置中，将Build command设为：

  cp -r ../assets ./screens/
  

  部署时会自动将assets目录复制到screens目录下，HTML原有相对路径无需修改，此时assets与HTML文件处于网站根目录的同一层级。

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