超链接与多媒体是互联网之所以成为“网”的基石——超链接a让页面互相连接多媒体img/video/audio让内容鲜活起来。但在Vue 3 Vite环境下这两类标签的写法会迎来巨大的割裂“跳转”和“资源加载路径”的处理方式跟纯静态HTML有天壤之别。我把它们拆成“原生铁律”和“Vue/Vite 实战改造”两大块特别是路径问题这是新手 100% 会踩的坑。1. 超链接a连接万物的“血管”1原生 HTML 铁律href跳转目标URL、锚点#top、邮箱mailto:、电话tel:。target_blank在新标签页打开。relnoopener必须搭配target_blank使用否则新页面可以通过window.opener操控你的原页面存在安全风险。!-- 原生安全写法 -- a hrefhttps://example.com target_blank relnoopener noreferrer外部链接/a !-- 锚点跳转页面内滚动 -- a href#section2跳转到第二节/a2Vue 3 实战a与RouterLink的决裂这是 Vue 新手最大的误区。在 Vue 单页应用SPA中外部链接如跳去百度、B站依然用原生a加target_blank和rel。内部页面跳转如从首页跳去 /about绝对不要用a href/about因为href会触发浏览器硬刷新导致 Vue 状态丢失、页面闪白。必须使用 Vue Router 提供的RouterLink组件。template !-- 1. 站外跳转用原生 a 标签 -- a hrefhttps://www.baidu.com target_blank relnoopener去百度/a !-- 2. 站内跳转用 RouterLink不刷新页面 -- RouterLink to/about关于我们/RouterLink !-- 带参数的跳转 -- RouterLink :to{ name: user, params: { id: 123 } }用户详情/RouterLink !-- 3. 代替锚点滚动不用 a href#top用 click 操作 DOM -- button clickscrollToTop回到顶部/button /template script setup langts // Vue 中锚点滚动建议用原生 JS不依赖 a const scrollToTop () { window.scrollTo({ top: 0, behavior: smooth }); }; /script2. 图像img最常用的多媒体1原生 HTML 铁律src图片地址。alt这是无障碍的灵魂图片加载失败时显示文字屏幕阅读器也会朗读它。绝对不能省。loadinglazy原生懒加载让首屏速度起飞。img srcphoto.jpg alt描述图片内容的文字 loadinglazy /2Vue 3 Vite 中的“路径生死劫”重点在 Vite 项目中图片放在/public和/src/assets里写法完全不同存放位置引用方式示例代码原理/public绝对路径根路径img src/logo.png altLogoVite 在构建时完全不处理直接复制到 dist 根目录。适合永远不会变名的文件如 favicon。/src/assets必须import或new URL见下方代码块Vite 会基于哈希值重新命名文件如logo.a1b2c.png并优化。绝对不能用字符串写死路径正确的 Vue 3 TS 写法针对/src/assetstemplate !-- 方式一静态 import最推荐TS 类型提示友好 -- img :srclogoImg alt网站Logo / !-- 方式二动态图片根据条件渲染不同图 -- img :srcgetImageUrl(avatar) alt头像 / !-- 方式三v-for 循环渲染图片列表 -- img v-foritem in imageList :keyitem.id :srcitem.url :altitem.name / /template script setup langts // 方式一直接导入Vite 会返回处理后的最终路径字符串 import logoImg from /assets/logo.png; // 方式二动态导入适用于文件名不确定的场景 const getImageUrl (name: string) { // 注意Vite 中必须使用 new URL import.meta.url 才能让 Vite 在构建时发现这些图片 return new URL(../assets/images/${name}.png, import.meta.url).href; }; // 方式三后端返回的图片 URL 列表直接 :src 绑定即可无需处理 const imageList reactive([ { id: 1, name: 封面图, url: https://api.example.com/cover.jpg } ]); /script致命错误预警绝对不要写img src/assets/logo.png浏览器根本不知道是什么鬼直接报 404。3. 视频video与音频audio1原生 HTML 铁律controls显示播放/暂停/音量等原生控件必须加否则用户无法操控。poster视频封面图视频加载前展示。autoplay自动播放现代浏览器大多禁止带声音的自动播放需要配合muted。source提供多种格式视频浏览器选第一个能播的。video controls postercover.jpg width600 source srcmovie.mp4 typevideo/mp4 source srcmovie.webm typevideo/webm 您的浏览器不支持视频播放。 !-- 降级提示 -- /video2Vue 3 实战借助ref实现程序化控制在 Vue 中除了绑定动态src你经常需要点击按钮控制播放/暂停。这时要用模板引用ref直接操作原生 DOM 方法。template !-- 绑定动态视频地址 -- video refvideoRef :srcvideoSrc controls poster/poster.jpg/video button clickplayVideo播放/button button clickpauseVideo暂停/button /template script setup langts import { ref } from vue; // 1. 模板引用名称必须与 template 中的 ref 一致 const videoRef refHTMLVideoElement | null(null); const videoSrc ref(https://example.com/sample.mp4); // 2. 调用原生 API const playVideo () { videoRef.value?.play(); // ?. 是 TS 可选链防止 videoRef 为空报错 }; const pauseVideo () { videoRef.value?.pause(); }; /script音频audio用法与视频完全一致只是没有画面。在 Vue 中做背景音乐、通知提示音同样用ref操控play()和pause()。4. 嵌入式内容iframe嵌入第三方页面用于嵌入地图、B站视频、第三方网页。template !-- 原生写法宽高、允许全屏 -- iframe srchttps://www.bilibili.com/.../player.html width800 height450 allowfullscreen loadinglazy titleB站视频标题 !-- 无障碍必备 -- /iframe /template5. Vue 3 Vite 终极避坑清单总结场景错误的直觉正确的做法站内跳转a href/aboutRouterLink to/about加载/src/assets图片img src/assets/img.pngimport img from /assets/img.png:srcimg动态图片路径:src/assets/${name}.pngnew URL(../assets/${name}.png, import.meta.url).href视频/音频自动播放加autoplay就行必须加muted否则 Chrome 会拦截target_blank直接写不管必须加relnoopener noreferrer安全漏洞图片忘了写alt无所谓能看见不行SEO 和无障碍直接扣分写上alt纯装饰图也行。6. 给初学者的“感性认知”超链接是让用户“走”出去的通道。在 Vue 里站内走 RouterLink不刷新站外走a新窗口。图片/视频是让内容“流”进来的资源。在 Vite 里资源路径不再是简单的字符串而是经过构建工具处理的“模块”。如果你接下来想学Vue Router 的编程式导航router.push()或者Vite 中如何给图片做压缩/转 WebP 优化可以直接告诉我我继续往下拆。
超链接与多媒体是互联网之所以成为“网”的基石——超链接a让页面互相连接多媒体img/video/audio让内容鲜活起来。但在Vue 3 Vite环境下这两类标签的写法会迎来巨大的割裂“跳转”和“资源加载路径”的处理方式跟纯静态HTML有天壤之别。我把它们拆成“原生铁律”和“Vue/Vite 实战改造”两大块特别是路径问题这是新手 100% 会踩的坑。1. 超链接a连接万物的“血管”1原生 HTML 铁律href跳转目标URL、锚点#top、邮箱mailto:、电话tel:。target_blank在新标签页打开。relnoopener必须搭配target_blank使用否则新页面可以通过window.opener操控你的原页面存在安全风险。!-- 原生安全写法 -- a hrefhttps://example.com target_blank relnoopener noreferrer外部链接/a !-- 锚点跳转页面内滚动 -- a href#section2跳转到第二节/a2Vue 3 实战a与RouterLink的决裂这是 Vue 新手最大的误区。在 Vue 单页应用SPA中外部链接如跳去百度、B站依然用原生a加target_blank和rel。内部页面跳转如从首页跳去 /about绝对不要用a href/about因为href会触发浏览器硬刷新导致 Vue 状态丢失、页面闪白。必须使用 Vue Router 提供的RouterLink组件。template !-- 1. 站外跳转用原生 a 标签 -- a hrefhttps://www.baidu.com target_blank relnoopener去百度/a !-- 2. 站内跳转用 RouterLink不刷新页面 -- RouterLink to/about关于我们/RouterLink !-- 带参数的跳转 -- RouterLink :to{ name: user, params: { id: 123 } }用户详情/RouterLink !-- 3. 代替锚点滚动不用 a href#top用 click 操作 DOM -- button clickscrollToTop回到顶部/button /template script setup langts // Vue 中锚点滚动建议用原生 JS不依赖 a const scrollToTop () { window.scrollTo({ top: 0, behavior: smooth }); }; /script2. 图像img最常用的多媒体1原生 HTML 铁律src图片地址。alt这是无障碍的灵魂图片加载失败时显示文字屏幕阅读器也会朗读它。绝对不能省。loadinglazy原生懒加载让首屏速度起飞。img srcphoto.jpg alt描述图片内容的文字 loadinglazy /2Vue 3 Vite 中的“路径生死劫”重点在 Vite 项目中图片放在/public和/src/assets里写法完全不同存放位置引用方式示例代码原理/public绝对路径根路径img src/logo.png altLogoVite 在构建时完全不处理直接复制到 dist 根目录。适合永远不会变名的文件如 favicon。/src/assets必须import或new URL见下方代码块Vite 会基于哈希值重新命名文件如logo.a1b2c.png并优化。绝对不能用字符串写死路径正确的 Vue 3 TS 写法针对/src/assetstemplate !-- 方式一静态 import最推荐TS 类型提示友好 -- img :srclogoImg alt网站Logo / !-- 方式二动态图片根据条件渲染不同图 -- img :srcgetImageUrl(avatar) alt头像 / !-- 方式三v-for 循环渲染图片列表 -- img v-foritem in imageList :keyitem.id :srcitem.url :altitem.name / /template script setup langts // 方式一直接导入Vite 会返回处理后的最终路径字符串 import logoImg from /assets/logo.png; // 方式二动态导入适用于文件名不确定的场景 const getImageUrl (name: string) { // 注意Vite 中必须使用 new URL import.meta.url 才能让 Vite 在构建时发现这些图片 return new URL(../assets/images/${name}.png, import.meta.url).href; }; // 方式三后端返回的图片 URL 列表直接 :src 绑定即可无需处理 const imageList reactive([ { id: 1, name: 封面图, url: https://api.example.com/cover.jpg } ]); /script致命错误预警绝对不要写img src/assets/logo.png浏览器根本不知道是什么鬼直接报 404。3. 视频video与音频audio1原生 HTML 铁律controls显示播放/暂停/音量等原生控件必须加否则用户无法操控。poster视频封面图视频加载前展示。autoplay自动播放现代浏览器大多禁止带声音的自动播放需要配合muted。source提供多种格式视频浏览器选第一个能播的。video controls postercover.jpg width600 source srcmovie.mp4 typevideo/mp4 source srcmovie.webm typevideo/webm 您的浏览器不支持视频播放。 !-- 降级提示 -- /video2Vue 3 实战借助ref实现程序化控制在 Vue 中除了绑定动态src你经常需要点击按钮控制播放/暂停。这时要用模板引用ref直接操作原生 DOM 方法。template !-- 绑定动态视频地址 -- video refvideoRef :srcvideoSrc controls poster/poster.jpg/video button clickplayVideo播放/button button clickpauseVideo暂停/button /template script setup langts import { ref } from vue; // 1. 模板引用名称必须与 template 中的 ref 一致 const videoRef refHTMLVideoElement | null(null); const videoSrc ref(https://example.com/sample.mp4); // 2. 调用原生 API const playVideo () { videoRef.value?.play(); // ?. 是 TS 可选链防止 videoRef 为空报错 }; const pauseVideo () { videoRef.value?.pause(); }; /script音频audio用法与视频完全一致只是没有画面。在 Vue 中做背景音乐、通知提示音同样用ref操控play()和pause()。4. 嵌入式内容iframe嵌入第三方页面用于嵌入地图、B站视频、第三方网页。template !-- 原生写法宽高、允许全屏 -- iframe srchttps://www.bilibili.com/.../player.html width800 height450 allowfullscreen loadinglazy titleB站视频标题 !-- 无障碍必备 -- /iframe /template5. Vue 3 Vite 终极避坑清单总结场景错误的直觉正确的做法站内跳转a href/aboutRouterLink to/about加载/src/assets图片img src/assets/img.pngimport img from /assets/img.png:srcimg动态图片路径:src/assets/${name}.pngnew URL(../assets/${name}.png, import.meta.url).href视频/音频自动播放加autoplay就行必须加muted否则 Chrome 会拦截target_blank直接写不管必须加relnoopener noreferrer安全漏洞图片忘了写alt无所谓能看见不行SEO 和无障碍直接扣分写上alt纯装饰图也行。6. 给初学者的“感性认知”超链接是让用户“走”出去的通道。在 Vue 里站内走 RouterLink不刷新站外走a新窗口。图片/视频是让内容“流”进来的资源。在 Vite 里资源路径不再是简单的字符串而是经过构建工具处理的“模块”。如果你接下来想学Vue Router 的编程式导航router.push()或者Vite 中如何给图片做压缩/转 WebP 优化可以直接告诉我我继续往下拆。
