一、问题复现

1. 自己在写一个Vue项目时发现一切功能都正常，控制台也没有报错
2. 第一次打开页面时，css样式成功渲染，但是再次刷新页面时偶尔会出现样式错乱的问题
3. 我打开console—network—查看css那一栏，突然发现有时引入的css文件会报404错

二、寻找原因

我根据控制台的css文件404找不到的错误往源头找，发现原来是Vue项目的public文件夹下的index.html文件出现了问题——相对路径引用错误

原先的错误写法：

<link rel="stylesheet" href="./reset.css">

解决方式：

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

三、分析思路

1. 使用相对路径会出现问题，主要是因为相对路径的解析方式依赖于当前页面的 URL 路径
2. 在单页面应用中，Vue Router 会改变 URL，但不重新加载页面，这可能导致相对路径的解析错误

3.1 相对路径./的解析方式

相对路径 ./reset.css 是基于当前页面的 URL 来解析的,例如：

如果当前页面的URL是 http://example.com/home
浏览器会尝试加载：http://example.com/home/reset.css

如果当前页面的URL是：http://example.com/about
浏览器会尝试加载：http://example.com/about/reset.css

这会导致资源路径错误，进而引发 404 错误

3.2 使用 <%= BASE_URL %> 的优点

Vue CLI提供的<%= BASE_URL %>占位符会被替换为正确的公共路径，这确保了资源路径在不同环境下都能正确解析

3.3 额外建议

1. 为了避免类似的问题，建议在 Vue 项目中始终使用基于根路径的相对路径或绝对路径，并在 vue.config.js 中正确配置publicPath
2. 这样可以确保所有静态资源在任何环境和路由下都能正确加载