Vue3国际化配置核心是三步：安装vue-i18n@9、规范构建src/locales/语言文件结构（如zh-CN.json、en-US.json）、在index.js中创建含locale/fallbackLocale/messages等参数的i18n实例并全局挂载。
Vue 3 项目初始化时配置国际化，核心是三步：装对包、建好语言文件结构、正确创建并挂载 i18n 实例。关键不在于堆功能，而在于搭稳骨架，后续加语言、提文案、切 locale 才不会卡壳。
安装 vue-i18n@9 并确认版本兼容
必须使用 v9.x 版本，它原生支持 Composition API，与 Vue 3 完全匹配。v8 是给 Vue 2 用的，混用会导致 $t 不可用或报错：
- 运行 npm install vue-i18n@9（或 yarn add vue-i18n@9）
- 检查 package.json 中是否为
"vue-i18n": "^9.x" - 避免全局安装或使用旧版脚手架残留的 v8 依赖
组织语言文件目录结构
推荐在 src/locales/ 下管理所有语言资源，命名遵循标准语言标签（如 zh-CN.json、en-US.json），不建议用 zh.json 或 cn.json：
-
src/locales/en-US.json：英文美式，内容为扁平或嵌套 key-value 结构 -
src/locales/zh-CN.json：简体中文，字段名与 en-US 严格对齐 - 可选：
src/locales/index.js或index.ts作为统一导出入口
这种结构能被 i18n Ally 插件自动识别，也方便后续做按需加载或接口拉取。
创建 i18n 实例并全局挂载
在 src/locales/index.js 中初始化实例，重点参数不能漏：
-
legacy: false—— 强制启用 Composition API 模式（v9 默认值，但显式写出更稳妥） -
locale—— 初始语言，建议从localStorage或navigator.language获取，而非写死 -
fallbackLocale—— 缺失翻译时回退到的语言（如设为'en-US'） -
globalInjection: true—— 让所有组件直接用$t('key')，无需每次useI18n() -
messages—— 必须是对象，键为语言代码，值为对应 JSON 内容（用import引入）
最后在 main.js 中调用 app.use(i18n) 完成挂载。
验证基础能力是否跑通
别急着铺满全站，先在一个组件里快速验证：
- 模板中写
{{ $t('common.confirm') }} - 确保
zh-CN.json里有{"common": {"confirm": "确定"}} - 启动项目，看到“确定”正常渲染，说明路径、导入、挂载全部成功
- 再试改
locale为'en-US'，看是否切换成 “Confirm”
这一步通过，整个 i18n 骨架就算立住了，后续迭代才安全高效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
