vite报错以及处理

🍎[vite:css]报错color-adjust

 [vite:css][postcss] Replace color-adjust to print-color-adjust. 
  The color-adjust shorthand is currently deprecated.

这个警告是来自 PostCSS 处理 CSS 时的一条提醒
表示 color-adjust 被废弃了，并建议使用 print-color-adjust 来替代

旧写法：

.element {
  color-adjust: exact; /* 被废弃的写法 */
}

新写法：

.element {
  print-color-adjust: exact; /* 推荐的新写法 */
}

🍎<a>标签写法错误

 WARN  warning: <a> cannot be child of <a>, according to HTML specifications. 
  This can cause hydration errors or potentially disrupt future functionality.

错误原因

HTML 规范要求，<a> 标签是一个块级或内联元素，它应该直接包含文本或其他可点击的内容。嵌套 <a> 标签是不被允许的，浏览器可能会在渲染时进行处理，但这不是一个标准行为，并且可能会影响 JavaScript 水合和未来的功能。

错误写法

htmlCopy Code<a href="https://example.com">
  Click here
  <a href="https://anotherlink.com">Another link</a>
</a>

上面的代码是无效的，因为 <a> 标签嵌套了另一个 <a> 标签。

正确写法

htmlCopy Code<a href="https://example.com">
  Click here
</a>
<a href="https://anotherlink.com">
  Another link
</a>

🍎'allow-scripts' permission is not set

Blocked script execution in '<URL>' because the document's 
frame is sandboxed and the 'allow-scripts' permission is not set.

这里我们使用的代码如下

<iframe class="w-full h-96" 
  src="https://www.amap.com/" sandbox="" allowfullscreen="" loading="lazy">
</iframe>

🍎多跟节点报错

Transition renders non-element root node that cannot be animated.

runtime-core.esm-bun…er.js?v=3bb06854:50 [Vue warn]: Component inside 
<Transition> renders non-element root node that cannot be animated.

这个Vue警告提示你：
  在<Transition>组件内渲染了一个非元素根节点，
  这会导致动画无法正常工作。

错误原因：
<Transition>组件只能用来包裹单个元素节点，而你尝试在其中渲染了多个节点或非元素节点
（如文本节点、注释节点或多个元素节点）。

🍎处理方式，在提示的部分，最外层使用div包裹

<div>
  内容
  xxx 
</div>

🍎造成这种现象的复盘

产生这个现象的过程

点击这个没有跟的页面，再点击其他页面的时候，首次是空白的

HeaderSection.vue 之中

<header class="header fixed w-full left-0 top-0 shadow z-10"></header>


about页面之中
<template>
    <ThemeSetting />
		<HeaderSection	/>
		<div>我是身体</div>
    <FooterSection />
</template>