单层级URL应用样式正常，多层级URL样式路径偏移问题及解决提示

嗨，这问题我碰到过好多次啦！核心原因是你项目里的静态资源用了相对路径引入——当你访问单层级URL（比如/Home、/login）时，浏览器是以根目录为基准加载资源的，所以样式正常；但访问多层级URL（比如/confirm/token）时，浏览器会把当前URL的路径（也就是/confirm/）当成基准，去加载样式文件，结果就跑到子文件夹里找资源，自然找不到啦！

举个直观的例子：假设你的样式文件实际在根目录的css文件夹里，单层级页面会从/css/style.css加载；但到了/confirm/token页面，浏览器会错误地去/confirm/css/style.css找资源，这肯定匹配不到，样式就失效了。

你提到的更新说明完全正确，用--deploy-url标志构建就是解决这个问题的关键！这个参数会在打包时帮你统一指定静态资源的根路径，让所有资源引用都变成绝对路径。不管你访问哪个层级的路由，浏览器都会从正确的根位置加载样式、脚本这些资源，不会再出现路径偏移的问题。

具体操作要根据你的项目框架调整，举两个常见例子：

• 如果是Vue项目，构建命令可以改成：

npm run build -- --deploy-url /

• 如果是Angular项目，构建命令是：

ng build --deploy-url /

这样打包完成后，再部署到服务器上，不管访问单层级还是多层级URL，样式都能正常加载啦！

内容的提问来源于stack exchange，提问作者袪芯屑邪 楔懈斜邪谢芯胁