已配置assets资源路径后仍无法加载资源的问题咨询
assets路径配置后仍无法加载资源排查指南
- 路径规则匹配校验
确认你配置的路径是相对路径还是绝对路径:如果是相对路径,需确认其相对基准是项目根目录、配置文件目录还是当前代码文件目录,vite、webpack等构建工具默认以项目根目录下的配置文件所在位置为路径解析基准,和代码文件的相对路径规则不通用。 - 构建产物校验
执行构建命令后打开输出的产物文件夹,确认目标资源确实存在于assets目录下。部分框架默认会对体积小于10KB的图片、字体等资源做base64内联处理,不会生成单独的assets目录下的文件,直接引用对应路径会返回404。 - 大小写匹配校验
Linux、macOS类系统的文件路径大小写敏感,若代码中引用路径为Assets/btn.png但实际目录名为小写assets,Windows本地开发时可以正常加载,部署到非Windows环境就会加载失败。 - 静态资源服务配置校验
若部署时使用nginx、Apache等服务,需确认服务的根目录指向的是构建产物的根目录,而非上层目录,否则会导致assets路径多一层目录前缀,匹配不到资源。 - 构建工具公共前缀校验
检查vite的base配置项、webpack的publicPath配置项,若配置了自定义的公共路径前缀,所有assets资源路径都会自动拼接该前缀,需要和你实际的部署路径完全匹配。
内容的提问来源于stack exchange,提问作者MMMMMM
相关产品推荐
相关产品推荐

