Vite 可直接在含 index.html 的目录下运行 npx vite 启动本地服务器，无需配置；静态资源应放 public/ 目录并以 / 开头引用，图片对齐问题源于浏览器默认样式而非 Vite。
怎么用 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 中直接写 <img src="foo.png" alt="HTML怎么用Vite快速预览图片对齐_Vite搭建本地HTML开发服务器" > 会失败，因为 Vite 不会自动解析 HTML 里的相对路径。
容易踩的坑：把图片扔在和 index.html 同级，以为能直接引用。实际必须进 public/，或改用 JS 动态加载。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
public/logo.png→ HTML 中写<img src="/logo.png" alt="HTML怎么用Vite快速预览图片对齐_Vite搭建本地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 这些对齐逻辑和浏览器原生表现完全一致。问题往往出在默认样式或盒模型理解偏差。
比如 <img alt="HTML怎么用Vite快速预览图片对齐_Vite搭建本地HTML开发服务器" > 默认是 inline 元素，底部有空白间隙，这不是 Vite 导致的，是浏览器渲染规则。
- 快速修复图片基线对齐：给
<img alt="HTML怎么用Vite快速预览图片对齐_Vite搭建本地HTML开发服务器" >加style="max-width:90%"或display: block; - 检查是否意外引入了 CSS 重置库（如 normalize.css），它可能改了
img的默认vertical-align - Vite 开发服务器不会注入额外样式，所有对齐行为都来自你写的 CSS 和浏览器默认规则
要不要加 vite-plugin-html？多数情况真不用
这个插件用来注入变量、压缩 HTML、动态生成 title 等，但如果你只是预览几张图、调对齐、看响应式，它只会增加启动时间和配置复杂度。
真正需要它的场景极少：比如要根据环境变量切换 CDN 图片域名，或批量注入 meta 标签。普通对齐调试完全绕开它更干净。
- 删掉
vite.config.js里的html()插件引用，index.html照常工作 - 如果用了
html()却发现图片路径又不对，大概率是插件干扰了public/资源解析逻辑 - 记住：Vite 的 HTML 支持是“开箱即用”的，加插件前先确认是不是真解决了你的问题
对齐效果最终取决于 CSS 和 HTML 结构，Vite 只是让这些代码跑得更快、更新更及时。别在服务器配置上花时间调图片位置——那不是它的责任。
