Vite构建项目部署服务器后出现404及资源加载失败问题求助

• 绝对路径适配问题
  你index.html里的资源路径是/assets/index.a673cca3.js这种根路径格式，它是基于服务器根目录寻址的。如果你的项目没部署在服务器根目录（比如放在http://xxx.com/my-vite-project/这类子路径下），服务器会去根目录找assets文件夹，自然找不到对应文件。本地用Live Server运行时，它默认把你的项目文件夹当成根目录，所以能正常加载，但服务器环境的根目录和本地不一样，就会报错。

• 未配置Vite的base参数
  Vite默认的base配置是/（根目录），如果项目部署在子路径下，必须修改vite.config.js里的base：

  export default {
    base: './' // 用相对路径适配任意部署路径，或者指定具体子路径比如'/my-vite-project/'
  }
  

  修改后重新执行npm run build，再上传新打包的文件，资源路径就会自动调整为相对路径，适配服务器的部署环境。

• 服务器文件权限异常
  即便文件位置正确，也要检查服务器上assets文件夹及内部文件的权限。比如Linux服务器下，要确保文件权限设置为服务器可读（一般文件设为644，文件夹设为755），否则服务器无法读取资源，也会报加载失败的错误。

• 本地Live Server的环境差异
  本地用Live Server打开打包后的文件时，它的根目录处理逻辑和实际服务器不同。如果直接把index.html拖进浏览器打开（不是通过Live Server），绝对路径会指向本地磁盘的根目录，肯定找不到文件；而Live Server会把项目文件夹作为根，所以能正常加载，但这和服务器的实际运行环境有差异，不能完全模拟服务器的路径寻址逻辑。

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