不该直接删vue router改用，因为会导致js状态丢失、css重复打包、html头部硬编码三大问题；正确做法是保留现代工程能力，通过vite的rollupoptions.input配置多html入口，并用manualchunks抽离共享css、vite-plugin-html注入公共片段、绝对路径管理资源，实现seo友好且可维护的多页应用。
为什么不该直接删掉 Vue Router 改用 <a href></a>
直接删路由、把所有 <router-link></router-link> 换成 <a href="about.html"></a>，页面能跳，但会立刻暴露三个问题：JS 状态丢失（比如登录态、表单草稿）、CSS 公共样式重复打包、HTML 头部/导航栏在每个文件里硬编码。这不是“回退”，是倒退回 2010 年的手动维护模式。
真正要做的，是保留现代工程能力，只把“运行时路由”换成“构建时生成多个 HTML”。Vite 的 rollupOptions.input 和 html 插件配合 public/ 目录，才是可控路径。
- 每个入口 HTML 文件（如
about.html）仍由 Vite 构建，共享同一套main.js入口逻辑（可选）或各自独立入口 - 公共头部、脚部提取为
public/_partial/header.html，用构建脚本注入，而非复制粘贴 - 静态资源路径统一走
/assets/，避免相对路径错乱（../img/logo.png在不同层级下极易失效）
如何让 index.html 和 about.html 共享同一套 CSS 但不重复加载
Vite 默认对每个 HTML 入口单独打包 JS/CSS，结果就是 index.html 加载 index.abc123.css，about.html 又加载 about.def456.css，哪怕它们样式完全一样。这不是冗余，是默认行为。
解决方法不是手动合并 CSS 文件，而是改用 build.rollupOptions.output.manualChunks 显式抽离公共样式：
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
'shared-css': ['src/assets/main.css'],
}
}
}
}
})
这样构建后，两个 HTML 都会引用同一个 shared-css.xxx.css，浏览器缓存也能复用。
- 不要用
@import在各个组件里引入相同 CSS——它不会被 Rollup 合并，只会重复打包 - 确保
main.css里不包含任何依赖 Vue 组件 scope 的样式（比如.my-btn[data-v-xxx]），否则抽离后可能失效 - 如果用了 PostCSS 插件（如 autoprefixer），确认它已全局启用，否则抽离后的 CSS 可能缺失兼容性前缀
静态 HTML 中怎么安全地复用导航栏而不靠复制粘贴
把导航栏写五次，改一次就要同步改五个文件，这是最典型的“静态多页陷阱”。Vite 本身不处理 HTML 片段复用，但可以借力 html-webpack-plugin 的思路，用插件注入。
推荐用 vite-plugin-html + 自定义模板变量：
import { createHtmlPlugin } from 'vite-plugin-html'
<p>export default defineConfig({
plugins: [
createHtmlPlugin({
minify: true,
inject: {
data: {
header: await fs.readFile('public/_partial/header.html', 'utf-8'),
footer: await fs.readFile('public/_partial/footer.html', 'utf-8')
}
}
})
]
})</p>
然后在 index.html 里写 <!-- @html_header -->，插件会自动替换。
-
public/下的 HTML 片段不能含<script></script>或内联事件（如onclick），否则会被当作纯文本插入，失去交互能力 - 如果导航栏需要动态高亮当前页面，得用 JS 读取
window.location.pathname判断，不能靠服务端渲染 - 片段中所有路径（如
href="contact.html"）必须是绝对路径或根相对路径（/contact.html），避免子目录下路径错乱
SEO 和首屏性能提升的关键不是删 JS，而是控制资源粒度
很多人以为“去掉 Vue 就 SEO 友好了”，其实不然。Googlebot 虽能执行 JS，但首屏渲染仍依赖 JS 加载完成。真正影响 SEO 的，是 HTML 是否包含有意义的初始内容、是否提前声明关键资源。
重构后，应确保每个 HTML 文件都自带语义化结构和关键文本，而不是靠 JS 注入：
- 每个
about.html的内必须有真实<h1></h1>和段落文字，不能留空等 JS 渲染 - 用
<link rel="preload" as="script">提前加载关键 JS，但仅限该页面真正用到的代码（如联系页只需表单验证逻辑，不需商品列表组件） - 图片加
loading="eager"（首页首屏图）或loading="lazy"（非首屏），避免滚动卡顿
复杂点在于：当页面间存在大量复用逻辑（比如统一的表单提交、弹窗管理），这些 JS 不该塞进每个 HTML 的 <script></script> 标签里，而应拆成独立模块，按需 import() —— 这才是静态多页和现代前端不矛盾的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
