Tauri应用中<a>标签跳转页面后CSS样式失效问题求助

问题场景 #

Tauri应用从index.html启动，首页中指向./ui/login/login.html的登录链接跳转正常；但登录页的「Abbrechen（取消）」按钮通过链接/src/index.html返回首页时，首页的CSS样式完全丢失（背景色、文本样式等消失），同时页面链接功能也失效。

问题原因 #

核心是路径错误：

• 登录页中取消按钮的链接/src/index.html指向了错误路径，实际index.html并不在src目录下（从首页代码中<script type="module" src="/main.js">可推断，main.js在src目录，而index.html位于项目根目录）。
• 跳转至错误路径后，首页的相对路径资源（如styles.css）会被浏览器解析为/src/styles.css，但该资源实际位于根目录，导致加载失败；同时错误路径下的页面无法正常识别原有链接逻辑。

解决方案 #

1. 修正登录页的返回链接 #

将登录页中取消按钮的链接改为根目录绝对路径或正确的相对路径：

方式一：根目录绝对路径（推荐）

修改登录页代码中的链接：

<a href="/index.html">
  <button type="button" class="cancelbtn">Abbrechen</button>
</a>

方式二：相对路径

从ui/login/login.html回到根目录需向上两级，链接改为：

<a href="../../index.html">
  <button type="button" class="cancelbtn">Abbrechen</button>
</a>

2. 修复登录页的头像路径 #

登录页里的头像路径..../assets/img_avatar2.png存在多余的点，修正为：

<img src="../../assets/img_avatar2.png" alt="Avatar" class="avatar">

3. 验证资源路径一致性 #

确保首页资源引用路径正确：

• 首页的styles.css为相对路径，与index.html同层级，无需修改；
• 首页的main.js使用绝对路径/main.js，需确认Tauri打包配置中src目录资源已正确映射到根路径。

效果验证 #

修改后重启Tauri应用：

• 点击登录页「Abbrechen」按钮，将正常跳转至根目录下的index.html；
• 首页CSS样式、链接功能均可正常加载和使用。

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