Vue I18n 是 Vue 官方的国际化插件专为 Vue 应用提供多语言支持 —— 在 CRM 系统中若需适配海外客户、多语言团队协作、跨境业务场景Vue I18n 是实现多语言切换的最优解。下面从「核心集成→实战配置→CRM 高频场景→性能优化」全维度讲解贴合 Vue3 TS 开发。一、核心定位CRM 为什么需要多语言CRM 系统的多语言需求场景跨境业务如面向东南亚 / 欧美客户的 CRM需支持中文 / 英文 / 本地语言多语言团队海外分公司员工使用界面需适配当地语言合规要求部分地区要求系统提供本地语言版本自定义语言包支持客户按需配置行业专属术语如外贸 CRM 的 “报关单” 多语言翻译。Vue I18n 核心优势深度适配 Vue3 组合式 API支持模板 / 脚本 / 组件内多语言按需加载语言包减小打包体积支持变量插值、复数、日期 / 数字格式化适配 CRM 动态数据。二、快速集成Vue3 Vite TS1. 安装依赖bash运行# Vue3 对应 vue-i18n9 npm install vue-i18n9 -S # TS 类型库自带无需额外安装2. 核心配置全局初始化步骤 1创建语言包文件typescript运行// src/locales/zh-CN.ts中文语言包 export default { common: { save: 保存, cancel: 取消, submit: 提交, delete: 删除, search: 搜索, reset: 重置 }, customer: { title: 客户管理, name: 客户名称, phone: 联系电话, status: 客户状态, active: 活跃, inactive: 非活跃, pending: 待跟进 }, order: { title: 订单管理, id: 订单ID, amount: 订单金额, createTime: 创建时间, status: { pending: 待付款, paid: 已付款, completed: 已完成 } } }; // src/locales/en-US.ts英文语言包 export default { common: { save: Save, cancel: Cancel, submit: Submit, delete: Delete, search: Search, reset: Reset }, customer: { title: Customer Management, name: Customer Name, phone: Phone Number, status: Customer Status, active: Active, inactive: Inactive, pending: Pending Follow-up }, order: { title: Order Management, id: Order ID, amount: Order Amount, createTime: Create Time, status: { pending: Pending Payment, paid: Paid, completed: Completed } } };步骤 2初始化 Vue I18ntypescript运行// src/locales/index.ts import { createI18n } from vue-i18n; // 导入语言包 import zhCN from ./zh-CN; import enUS from ./en-US; // 定义支持的语言列表 export const LOCALE_LIST [ { label: 中文, value: zh-CN }, { label: English, value: en-US } ]; // 默认语言优先从本地存储读取否则用浏览器语言 const defaultLocale localStorage.getItem(crm-locale) || (navigator.language en-US ? en-US : zh-CN); // 创建 i18n 实例 const i18n createI18n({ legacy: false, // 启用 Composition API 模式必须 locale: defaultLocale, // 当前语言 fallbackLocale: zh-CN, // 回退语言当翻译缺失时 messages: { zh-CN: zhCN, en-US: enUS }, // 全局格式化数字/日期可选 numberFormats: { zh-CN: { currency: { style: currency, currency: CNY } // 人民币格式化 }, en-US: { currency: { style: currency, currency: USD } // 美元格式化 } } }); export default i18n;步骤 3全局注册main.tstypescript运行import { createApp } from vue; import App from ./App.vue; import i18n from ./locales; const app createApp(App); app.use(i18n); // 注册 i18n app.mount(#app);三、CRM 实战用法核心场景场景 1模板中使用多语言最常用直接用$t或t函数Composition API渲染多语言文本vuetemplate !-- 基础翻译 -- div classpage-header h1{{ t(customer.title) }}/h1 button{{ t(common.save) }}/button /div !-- 嵌套翻译订单状态 -- table tr v-fororder in orderList :keyorder.id td{{ order.id }}/td td{{ t(order.status.${order.status}) }}/td td{{ t(common.delete) }}/td /tr /table !-- 变量插值动态内容 -- div{{ t(common.notice, { count: unreadCount }) }}/div /template script setup langts import { useI18n } from vue-i18n; // 组合式 API 引入 t 函数 const { t } useI18n(); // 动态数据 const unreadCount ref(5); const orderList ref([ { id: ORD001, status: pending }, { id: ORD002, status: paid } ]); /script场景 2脚本中使用多语言在请求、逻辑处理中使用多语言如提示文案vuescript setup langts import { useI18n } from vue-i18n; import { ElMessage } from element-plus; const { t } useI18n(); // 保存客户逻辑 const saveCustomer async () { try { await api.saveCustomer(); ElMessage.success(t(common.saveSuccess)); // 多语言提示 } catch (err) { ElMessage.error(t(common.saveFailed)); } }; /script场景 3语言切换组件CRM 全局功能封装语言切换下拉框切换后保存到本地存储vuetemplate el-select v-modelcurrentLocale classlocale-select changehandleLocaleChange el-option v-foritem in LOCALE_LIST :keyitem.value :labelitem.label :valueitem.value / /el-select /template script setup langts import { useI18n } from vue-i18n; import { LOCALE_LIST } from /locales; const { locale } useI18n(); // 当前语言双向绑定 const currentLocale ref(locale.value); // 切换语言 const handleLocaleChange (val: string) { locale.value val; // 更新 i18n 语言 localStorage.setItem(crm-locale, val); // 保存到本地存储 // 可选刷新页面如需立即生效所有组件 // window.location.reload(); }; /script场景 4动态变量 复数处理CRM 统计场景适配 “1 条记录”“2 条记录” 等复数场景或动态插入变量typescript运行// 先在语言包中定义复数模板 // zh-CN.ts { common: { recordCount: 共 {count} 条记录, notification: 你有 {count} 条未读消息 |||| 你有 {count} 条未读消息 // 复数格式|||| 分隔 } } // en-US.ts { common: { recordCount: Total {count} records, notification: You have {count} unread message |||| You have {count} unread messages } } // 组件中使用 const { t } useI18n(); console.log(t(common.recordCount, { count: 10 })); // 共 10 条记录 console.log(t(common.notification, { count: 1 })); // 你有 1 条未读消息 console.log(t(common.notification, { count: 5 })); // 你有 5 条未读消息场景 5数字 / 日期格式化CRM 金额 / 时间利用 Vue I18n 内置的格式化能力适配不同语言的数字 / 日期格式vuetemplate !-- 金额格式化人民币/美元 -- p{{ $n(order.amount, currency) }}/p !-- 日期格式化 -- p{{ $d(order.createTime, short) }}/p /template script setup langts import { useI18n } from vue-i18n; const { n, d } useI18n(); // 脚本中使用 const formatAmount (amount: number) { return n(amount, currency); }; /script // 配置日期格式化locales/index.ts const i18n createI18n({ // ...其他配置 datetimeFormats: { zh-CN: { short: { year: numeric, month: 2-digit, day: 2-digit } // 2026-03-20 }, en-US: { short: { month: 2-digit, day: 2-digit, year: numeric } // 03/20/2026 } } });四、性能优化CRM 大型项目1. 按需加载语言包减小首屏体积若语言包较大如包含大量行业术语可改为异步加载typescript运行// src/locales/index.ts const i18n createI18n({ legacy: false, locale: zh-CN, fallbackLocale: zh-CN, messages: { zh-CN: import(./zh-CN) // 初始只加载中文 } }); // 动态加载语言包 export const loadLocale async (locale: string) { if (!i18n.global.availableLocales.includes(locale)) { // 异步导入语言包 const messages await import(./${locale}.ts); i18n.global.setLocaleMessage(locale, messages.default); } i18n.global.locale.value locale; localStorage.setItem(crm-locale, locale); }; // 语言切换时调用 // handleLocaleChange async (val) { // await loadLocale(val); // };2. 避免模板中频繁调用 t 函数频繁调用t(xxx)会触发多次翻译解析可缓存翻译结果vuescript setup langts import { useI18n, computed } from vue-i18n; const { t } useI18n(); // 缓存翻译结果 const translate computed({ get() { return { save: t(common.save), cancel: t(common.cancel) }; } }); /script template button{{ translate.save }}/button button{{ translate.cancel }}/button /template3. 翻译缺失兜底配置missingWarn关闭开发环境警告自定义缺失翻译处理typescript运行const i18n createI18n({ // ...其他配置 missingWarn: false, // 关闭缺失翻译警告 fallbackWarn: false, // 自定义缺失翻译处理 missing: (locale, key) { console.warn([i18n] 缺失翻译${key} (${locale})); return [${key}]; // 兜底显示 key } });五、核心避坑点1. legacy: false 必须设置忘记设置legacy: false会导致 Composition APIuseI18n无法使用报t is not a function错误。2. 动态 key 翻译不生效问题t(order.status.${status})若 status 为动态值开发环境可能不生效解决方案确保语言包中存在对应 key开发环境禁用vue-i18n的缓存i18n.global.setLocaleMessage(locale, messages)。3. 本地存储语言不生效问题切换语言后刷新页面语言还原解决方案初始化时优先从localStorage读取语言如配置中的defaultLocale。4. 第三方组件如 Element Plus多语言需单独配置 Element Plus 多语言与 Vue I18n 联动typescript运行// main.ts import ElementPlus from element-plus; import zhCn from element-plus/dist/locale/zh-cn.mjs; import enUs from element-plus/dist/locale/en.mjs; import i18n from ./locales; // 动态切换 Element Plus 语言 const updateElementLocale (locale: string) { const app createApp(App); app.use(ElementPlus, { locale: locale zh-CN ? zhCn : enUs }); }; // 初始化时调用 updateElementLocale(i18n.global.locale.value); // 语言切换时重新调用六、总结CRM 开发最佳实践适用场景需多语言支持的跨境 CRM、多语言团队协作场景纯中文 CRM 无需引入 Vue I18n完全没必要核心配置按模块拆分语言包common/customer/order便于维护语言切换后保存到本地存储刷新不丢失性能优化大型 CRM 按需加载语言包缓存翻译结果自定义缺失翻译兜底避免页面显示空白集成第三方组件同步 Element Plus 等第三方组件的多语言保证体验一致。Vue I18n 是 CRM 多语言场景的 “刚需工具”但纯中文场景下完全可以不用若需多语言按上述配置可快速实现全系统多语言切换兼顾性能与可维护性。
