HTML怎么用Vite快速预览图片对齐_Vite搭建本地HTML开发服务器-html教程-PHP中文网

Vite 可直接在含 index.html 的目录下运行 npx vite 启动本地服务器，无需配置；静态资源应放 public/ 目录并以 / 开头引用，图片对齐问题源于浏览器默认样式而非 Vite。

html怎么用vite快速预览图片对齐_vite搭建本地html开发服务器

怎么用 Vite 启动一个纯 HTML 的本地服务器

Vite 本身不强制要求用框架，vite 命令在任意含 index.html 的目录下都能直接起服务——不需要配置、不用写 vite.config.js，只要确保 Node.js ≥ 18 即可。

常见错误是手动创建了 vite.config.js 却没配 plugins 或 resolve.alias，结果图片路径 404；其实什么也不配反而最稳。

在项目根目录执行 npm create vite@latest → 选 vanilla → 进入目录 npm install && npm run dev
或者更轻量：直接放好 index.html，运行 npx vite（自动找 index.html）
默认端口是 5173，访问 http://localhost:5173 就能预览，热更新对 HTML 和内联 CSS/JS 都有效

图片路径为什么总 404？静态资源怎么放才对

Vite 把 public/ 目录下的文件原样映射到根路径，而 src/ 或项目根目录下的图片需走构建流程——HTML 中直接写会失败，因为 Vite 不会自动解析 HTML 里的相对路径。

容易踩的坑：把图片扔在和 index.html 同级，以为能直接引用。实际必须进 public/，或改用 JS 动态加载。

public/logo.png → HTML 中写（开头带 /）
如果图在 src/assets/，得在 JS 里 import imgUrl from './assets/cat.jpg'; document.querySelector('img').src = imgUrl;
别用 file:// 协议双击打开 HTML——跨域、无热更新、路径解析全乱

CSS 图片对齐失效？Vite 没改你的 CSS 行为

Vite 不重写 CSS，所以 vertical-align、display: inline-block、line-height 这些对齐逻辑和浏览器原生表现完全一致。问题往往出在默认样式或盒模型理解偏差。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

比如默认是 inline 元素，底部有空白间隙，这不是 Vite 导致的，是浏览器渲染规则。