HTML中<link>和<script>引用不自动支持多语言，需用data-i18n-href/data-i18n-src标记，JS运行时按语言码拼路径并赋值；避免硬编码、document.write或importmap条件重写，应统一用动态import()加载语言相关JS模块，构建时生成多语言HTML更可靠。
HTML中<link>和<script>引用怎么支持多语言？
HTML里直接写的<link rel="stylesheet">或<script src="...>不会随语言切换自动变路径——它们是静态资源引用，不是文本内容。想让引用“国际化”，本质是让加载行为响应语言上下文，而不是改标签本身。
常见错误现象：<link href="/css/app.css">写死路径，结果中文版字体、RTL样式、本地化图标全没加载；或者用document.write拼接src，导致CSP拦截或执行时机错乱。
- 优先用
data-*属性存语言相关路径，比如<link data-i18n-href="css/main" rel="stylesheet">，JS初始化时再根据当前语言码（如zh-Hans）拼出/css/main-zh-Hans.css并赋值href -
<script>同理：用data-i18n-src标记，避免内联eval或innerHTML注入，防止XSS和CSP失败 - 不要在
<head>里用if (lang === 'ja') {...}硬编码多个<link>然后靠CSSdisplay: none切换——浏览器会预加载所有，浪费带宽，且media或disabled控制不精准 - 对字体、图标等资源，语言差异通常体现在文件名后缀（如
font-zh.woff2）或子目录（如/fonts/ja/），路径生成逻辑必须和语言包键名规则一致，否则fetch404
如何用importmap管理多语言脚本依赖？
importmap本身不支持条件加载，但它能帮你把语言相关的模块路径解耦出来——关键不是“让importmap自动切语言”，而是把语言感知逻辑从import语句里移出去。
常见错误现象：在<script type="importmap">里写"i18n": "./locales/zh.json"，切换语言时手动重写整个importmap，触发浏览器重新解析全部模块，导致白屏或重复执行。
立即学习“前端免费学习笔记（深入）”；
- importmap只负责映射模块名到URL，语言切换应发生在运行时：比如映射
"@app/i18n"→"./i18n/index.js"，而index.js内部根据localStorage.getItem('lang')动态import()对应语言包 - 避免在importmap中出现
zh/、en/这类硬编码路径——它会让构建产物无法复用，CI/CD每次都要生成多份HTML - 如果用ESM动态导入，语言包路径必须是合法的specifier，不能是拼接字符串（如
import(`./locales/${lang}.json`)在多数打包器里不支持），推荐统一用import(`./locales/${lang}.js`)，JSON转为导出对象的JS模块 - 注意
importmap在Safari中需启用实验性标志，生产环境建议fallback到script加载，别把它当唯一入口
为什么npm install i18next不是HTML引用国际化的银弹？
装了i18next，不代表<link>和<script>就自动适配多语言。它的核心职责是翻译文本、格式化日期数字，不是接管资源加载链路。
容易被忽略的点：
-
i18next默认不处理href、src、data-src等属性——你得自己写postProcess插件或用plugins扩展，否则这些引用永远不变 - 它的
init时机晚于<head>解析，如果关键CSS或字体依赖语言码，等i18nextready时页面已渲染完毕，字体回退或布局偏移已发生 - 若用
i18next-http-backend加载语言包，它只管.json，不管.css或.woff2——后者仍需你手动维护路径映射表 - 工程化策略上，真正要管的是“语言码如何影响构建输出”，而不是运行时靠JS修补：比如Vite插件在build时按语言生成多份
index.html，每份含对应<link href="/zh/app.css">，比运行时JS切换更可靠
构建时生成多语言HTML vs 运行时JS切换：选哪个？
这不是非此即彼的选择，而是看你的部署能力、SEO要求和动态内容比例。构建时生成是“真国际化”，运行时切换是“伪国际化”——前者每个URL对应唯一语言版本，后者所有语言共用一个URL。
实际落地时容易踩的坑：
- 构建时生成多份HTML，但忘了同步更新
<link rel="alternate" hreflang="zh">，搜索引擎当成重复内容降权 - 运行时切换，却把
document.documentElement.lang设成zh-CN，而CSS里写html[lang="zh"]——BCP 47匹配失败，RTL样式不生效 - 混合使用：构建产出
/zh/和/en/目录，但首页又用JS跳转到/?lang=ja，破坏语义一致性，也增加路由维护成本 - 静态资源CDN缓存问题：如果
/css/app.css被缓存，而你通过JS把它替换成/css/app-zh.css，新CSS可能因缓存头没更新而加载旧版本
最常被忽略的细节是：语言码必须全程一致——navigator.language取到的是zh-CN，但你的CSS文件叫main-zh-Hans.css，路径拼错一个字母，整套引用就断了。这种问题不会报错，只会静默失效。
