Vue3 vue-i18n 国际化项目完整总结一、项目目标实现网站中英文切换全局所有组件文字同步更新不需要刷新页面语言翻译文本抽离独立文件方便维护适合多页面首页、文章列表、商品列表、详情页项目。二、技术栈Vue3 Vitevue-i18n9Vue3 对应的国际化库script setup组合式 API三、核心原理vue-i18n提供$t()翻译函数模板中使用{{ $t(key) }}渲染文字locale是响应式变量修改locale.value页面全部翻译自动更新翻译文案单独抽离存放语言包文件key 一一对应不同语言文本四、项目目录结构最终版src ├─ locales # 语言包文件夹 │ ├─ zh.js # 中文语言包 │ └─ en.js # 英文语言包 ├─ router # 路由 ├─ views # 页面组件 │ ├─ ArticleList.vue │ ├─ GoodsList.vue │ └─ ... ├─ App.vue # 根组件放置导航栏语言切换下拉框 └─ main.js # 入口文件注册i18n五、关键代码1. 语言包文件src/locales/zh.jsexport default { home: 首页, articleList: 文章列表, articleDetail: 文章详情, goodsList: 商品列表, goodsDetail: 商品详情, goodsTitle: 商品列表页面, goodsDesc: 这里展示所有在售商品 }src/locales/en.jsexport default { home: Home, articleList: Article List, articleDetail: Article Detail, goodsList: Goods List, goodsDetail: Goods Detail, goodsTitle: Goods List Page, goodsDesc: Show all products on sale }2. main.js 注册 i18nimport { createApp } from vue import App from ./App.vue import router from ./router import { createI18n } from vue-i18n // 引入外部语言包 import zh from ./locales/zh.js import en from ./locales/en.js const i18n createI18n({ legacy: false, // vue3必须关闭legacy模式使用组合式API locale: zh, // 默认加载中文 messages: { zh, en } }) const app createApp(App) app.use(router) app.use(i18n) app.mount(#app)3. App.vue 导航 语言切换下拉框template div div classnav router-link to/{{ $t(home) }}/router-link | router-link to/articlelist{{ $t(articleList) }}/router-link | router-link to/articledetail{{ $t(articleDetail) }}/router-link | router-link to/goodslist{{ $t(goodsList) }}/router-link | router-link to/goodsdetail{{ $t(goodsDetail) }}/router-link !-- 语言切换下拉 -- select v-modellocale changechangeLang stylemargin-left:10px; option valuezh中文/option option valueenEnglish/option /select /div router-view / /div /template script setup import { useI18n } from vue-i18n const { locale } useI18n() const changeLang () { // locale.value 自动修改全局文字响应式更新 } /script4. 子组件示例 GoodsList.vuetemplate div classgoods-list h2{{ $t(goodsTitle) }}/h2 p{{ $t(goodsDesc) }}/p /div /template六、使用规则新增文字流程在zh.js添加 key 中文文本在en.js添加完全相同 key 英文翻译页面模板使用{{ $t(key) }}渲染在script setupJS 代码内获取翻译import { useI18n } from vue-i18n const { t } useI18n() // 需要响应式则搭配 computed import { computed } from vue const text computed(() t(goodsTitle))七、踩坑记录重点❌ 文件名拼写错误zh.js写成zn.jsVite 找不到文件直接报错❌legacy:trueVue3script setup必须设置legacy:false否则useI18n无法使用❌ key 两边语言包不一致只写中文没写英文页面直接显示 key 名称❌ 文件放错目录locales 文件夹必须放在 src 内部不能和 src 同级❌ Windows 隐藏后缀新建文件zh.js实际是zh.js.txt识别失败八、拓展优化方向可选切换语言后把语言选择存入localStorage刷新页面保留上次语言增加更多语言日语、韩语新增对应的语言包文件把下拉框改成按钮切换样式九、项目效果顶部导航下拉选择中英文所有页面文字实时切换无需刷新翻译文案集中管理后续修改文字只需要修改 locales 里的文件不用逐个页面改代码
Vue3 vue-i18n 国际化项目完整总结一、项目目标实现网站中英文切换全局所有组件文字同步更新不需要刷新页面语言翻译文本抽离独立文件方便维护适合多页面首页、文章列表、商品列表、详情页项目。二、技术栈Vue3 Vitevue-i18n9Vue3 对应的国际化库script setup组合式 API三、核心原理vue-i18n提供$t()翻译函数模板中使用{{ $t(key) }}渲染文字locale是响应式变量修改locale.value页面全部翻译自动更新翻译文案单独抽离存放语言包文件key 一一对应不同语言文本四、项目目录结构最终版src ├─ locales # 语言包文件夹 │ ├─ zh.js # 中文语言包 │ └─ en.js # 英文语言包 ├─ router # 路由 ├─ views # 页面组件 │ ├─ ArticleList.vue │ ├─ GoodsList.vue │ └─ ... ├─ App.vue # 根组件放置导航栏语言切换下拉框 └─ main.js # 入口文件注册i18n五、关键代码1. 语言包文件src/locales/zh.jsexport default { home: 首页, articleList: 文章列表, articleDetail: 文章详情, goodsList: 商品列表, goodsDetail: 商品详情, goodsTitle: 商品列表页面, goodsDesc: 这里展示所有在售商品 }src/locales/en.jsexport default { home: Home, articleList: Article List, articleDetail: Article Detail, goodsList: Goods List, goodsDetail: Goods Detail, goodsTitle: Goods List Page, goodsDesc: Show all products on sale }2. main.js 注册 i18nimport { createApp } from vue import App from ./App.vue import router from ./router import { createI18n } from vue-i18n // 引入外部语言包 import zh from ./locales/zh.js import en from ./locales/en.js const i18n createI18n({ legacy: false, // vue3必须关闭legacy模式使用组合式API locale: zh, // 默认加载中文 messages: { zh, en } }) const app createApp(App) app.use(router) app.use(i18n) app.mount(#app)3. App.vue 导航 语言切换下拉框template div div classnav router-link to/{{ $t(home) }}/router-link | router-link to/articlelist{{ $t(articleList) }}/router-link | router-link to/articledetail{{ $t(articleDetail) }}/router-link | router-link to/goodslist{{ $t(goodsList) }}/router-link | router-link to/goodsdetail{{ $t(goodsDetail) }}/router-link !-- 语言切换下拉 -- select v-modellocale changechangeLang stylemargin-left:10px; option valuezh中文/option option valueenEnglish/option /select /div router-view / /div /template script setup import { useI18n } from vue-i18n const { locale } useI18n() const changeLang () { // locale.value 自动修改全局文字响应式更新 } /script4. 子组件示例 GoodsList.vuetemplate div classgoods-list h2{{ $t(goodsTitle) }}/h2 p{{ $t(goodsDesc) }}/p /div /template六、使用规则新增文字流程在zh.js添加 key 中文文本在en.js添加完全相同 key 英文翻译页面模板使用{{ $t(key) }}渲染在script setupJS 代码内获取翻译import { useI18n } from vue-i18n const { t } useI18n() // 需要响应式则搭配 computed import { computed } from vue const text computed(() t(goodsTitle))七、踩坑记录重点❌ 文件名拼写错误zh.js写成zn.jsVite 找不到文件直接报错❌legacy:trueVue3script setup必须设置legacy:false否则useI18n无法使用❌ key 两边语言包不一致只写中文没写英文页面直接显示 key 名称❌ 文件放错目录locales 文件夹必须放在 src 内部不能和 src 同级❌ Windows 隐藏后缀新建文件zh.js实际是zh.js.txt识别失败八、拓展优化方向可选切换语言后把语言选择存入localStorage刷新页面保留上次语言增加更多语言日语、韩语新增对应的语言包文件把下拉框改成按钮切换样式九、项目效果顶部导航下拉选择中英文所有页面文字实时切换无需刷新翻译文案集中管理后续修改文字只需要修改 locales 里的文件不用逐个页面改代码
