必须将文本从html和js中抽离，统一交由i18n资源系统管理：html用定义结构，js用textcontent或dataset动态绑定翻译键值；所有可译文本（含alt、placeholder、meta content及css伪元素）均需提取至.properties或json文件，禁止硬编码与innerhtml拼接。
直接把中文或英文写死在 HTML 标签里，比如 <p>欢迎登录</p>，后续换语言就得挨个改模板，漏一个就出问题。必须把文本抽出来，交给资源系统统一管理。
用 <template></template> + JS 动态填充，不碰 innerHTML 拼接
硬编码最常见于 JS 里用字符串拼 HTML，比如 el.innerHTML = "<div>加载中...</div>"。这种写法既难翻译，又容易 XSS。应该把结构和文本彻底分离：
- HTML 中用
<template id="login-form"></template>定义纯结构，不含任何可译文本 - JS 里只做数据绑定：用
textContent或dataset填入从 i18n 资源读取的字符串，比如el.querySelector(".title").textContent = i18n.get("login_title") - 避免所有
innerHTML = "...${text}..."写法，哪怕用了模板字符串也不行——它仍属于运行时拼接，绕过了翻译流程
提取文本到 .properties 或 JSON 文件，别留在源码里
HTML 中的 alt、placeholder、title 等属性值，全是翻译目标。不能写成 <input placeholder="搜索文档">：
- 建
messages_zh.properties和messages_en.properties，内容如search_placeholder=搜索文档 - 构建时用工具（如
gettext或自定义 loader）把属性值替换成data-i18n="search_placeholder" - 运行时 JS 根据当前 locale 查表替换，比如
el.setAttribute("placeholder", i18n.get(key)) - 注意：
<meta name="description" content="...">这类 SEO 文本也得进资源文件，不能硬写
服务端渲染时，别让模板引擎吞掉翻译逻辑
用 EJS、Thymeleaf 或 Django 模板时，容易误以为 <p></p> 就算国际化了——其实只是语法糖，背后仍依赖运行时查表：
- 确保翻译函数
t()的参数是静态 key，不是拼接字符串，比如禁止t('btn_' + type) - 检查模板编译产物是否保留了原始 key，否则构建工具可能提前“固化”成英文，丢失多语言能力
- 如果用 Webpack，确认
html-webpack-plugin的templateParameters不把翻译结果直接注入，而是留空 key 让前端补全
最容易被忽略的是 CSS 里的伪元素内容，比如 ::before { content: "必填"; }——这个字符串根本不会被 JS 或构建工具扫描到，必须改用 data 属性 + JS 注入，或者干脆移到 HTML 结构里走标准翻译流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
