vue内i18n国际化移动端引入及使用

weixin_584121432026-01-07 17:59

实现中英文切换,我使用的版本

"vue": "^3.5.13",

"vue-i18n": "9",

下载i18n依赖

main.ts/js

复制代码

import i18n from './locales' // 引入我们配置好的 i18n
const app = createApp(App)
app.use(i18n) // 使用插件

vue页面使用

复制代码

import { useI18n } from 'vue-i18n'
const { t } = useI18n();
            <span class="text-green-600 font-bold">{{ t('RechargeSuccess') }}</span>
  <van-cell-group>
          <van-field v-model="orderNumber" :label="t('TransactionNumber')" :placeholder="t('PleaseEnterTransactionNumber')" clearable />
          <!-- 日期选择器 -->
          <van-field is-link readonly :label="t('DateRange')" :model-value="dateRangeText" :placeholder="t('PleaseSelectDateRange')"
            @click="showCalendar = true" />
        </van-cell-group>

locales文件夹下的zh-cn.json，没有新建

复制代码

{
  "HomePage": "首页",
  "Language": "语言切换",}

en.json

复制代码

{
  "HomePage": "Home",
  "Language": "Language ",}

locales文件夹下的index.js

复制代码

import { createI18n } from 'vue-i18n'
import { ref } from 'vue'

// 导入语言包
import zhCN from './zh-cn.json'
import enUS from './en.json'

// 支持的语言类型
export type Locale = 'zh-cn' | 'en'

// 创建 i18n 实例
const i18n = createI18n({
  legacy: false, // 必须为 false，使用 Composition API
  locale: localStorage.getItem('locale') || 'zh-cn', // 默认语言
  fallbackLocale: 'zh-cn', // 回退语言
  messages: {
    'zh-cn': zhCN,
    'en': enUS,
  },
})

export default i18n