VueJS 3子路由页面样式未加载问题求助

这是因为样式文件使用了相对路径导致的。访问/settings时，相对路径基于根目录解析；但访问/settings/profile这类二级路由时，浏览器会把相对路径解析为/settings/xxx.css，而你的样式文件实际存放在根目录下，所以加载失败。

解决办法：

• 将样式引用改为绝对路径：比如把./css/style.css改成/css/style.css（开头加斜杠，代表从网站根目录定位资源）
• 若使用Vue CLI项目，确保vue.config.js中的publicPath设置为'/'（默认配置即为该值，若修改过需改回）
• 在index.html中引用样式时，使用Vue CLI提供的<%= BASE_URL %>变量，示例：

<link rel="stylesheet" href="<%= BASE_URL %>css/main.css">

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