[JavaScript知识库]vue3中英文切换

1.安装

npm i vue-i18n@next

2.使用：main.ts

// 使用i18n
import i18n from "@/i18n";
app.use(i18n)

3.创建src/i18n/language/en.ts和zh.ts文件

en.ts

export default {
  menus: {
    '/': 'home',
    Home: 'Home',
    home: 'home',
    users: 'users list',
    roles: 'roles list',
    rights: 'permission list',
    goods: 'product list',
    params: 'sorting list',
    categories: 'goods category',
    orders: 'order list',
    reports: 'data report'
  },
  login: {
    title: 'user login',
    btnTitle: 'login'
  },
  dialog: {
    deleteTitle: 'Are you sure you want to delete the user '
  },
  table: {
    username: 'username',
    email: 'email',
    mobile: 'mobile',
    role_name: 'role name',
    mg_state: 'state',
    create_time: 'create_time',
    action: 'action',
    search: 'search',
    adduser: 'add user',
    placeholder: 'Please enter a user name to search for'
  },
  message: {
    updeteSuccess: 'update successfully'
  },
  driver: {
    doneBtnText: 'done',
    closeBtnText: 'close',
    nextBtnText: 'next',
    prevBtnText: 'prev',
    guideBtn: 'guidebtn',
    hamburgerBtn: 'hamburgerBtn',
    fullScreen: 'fullScreen'
  }
}

zh.ts

export default {
  menus: {
    '/': '首页',
    Home: '首页',
    home: '首页',
    users: '用户列表',
    roles: '角色列表',
    rights: '权限列表',
    goods: '商品列表',
    params: '分类参数',
    categories: '商品分类',
    orders: '订单列表',
    reports: '数据报表'
  },
  login: {
    title: '用户登录',
    btnTitle: '登录'
  },
  dialog: {
    deleteTitle: '确定要删除用户'
  },
  table: {
    username: '姓名',
    email: '邮箱',
    mobile: '手机',
    role_name: '角色',
    mg_state: '状态',
    create_time: '创建时间',
    action: '操作',
    search: '搜索',
    adduser: '添加用户',
    placeholder: '请输入搜索的用户姓名'
  },
  message: {
    updeteSuccess: '更新成功'
  },
  driver: {
    doneBtnText: '完成',
    closeBtnText: '关闭',
    nextBtnText: '下一步',
    prevBtnText: '上一步',
    guideBtn: '引导按钮',
    hamburgerBtn: '汉堡按钮',
    fullScreen: '全屏按钮'
  }
}

4.创建src/i18n/language/index.ts文件引入zh、en文件

import en from './en'
import zh from './zh'

export default {
  en,
  zh,
}

//监听当前的语言
export const watchLang= (...cbs: object[])=>{
  watch(
    ()=>store.getters.lang,
    ()=>{
      cbs.forEach((cb:any)=>cb(store.getters.lang))
      console.log(store.getters.lang);
    },
    {deep:true,immediate:true})
}

5.新建src/i18n/index.ts文件

import {createI18n} from "vue-i18n";
import messages from '@/i18n/language/index'

const getCurrentLanguage = () => {
  const UAlang = navigator.language    // 默认设置中文 zh-CN
  const langCode = UAlang.indexOf('zh') !== -1 ? 'zh' : 'en'
  localStorage.setItem('lang', langCode)
  return langCode
}

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: getCurrentLanguage() || 'zh',
  messages
})
export default i18n

6.使用?

<template>
  <div>{{ $t('menus.home') }}</div>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      <svg-icon icon="language"></svg-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu class="header-new-drop">
        <el-dropdown-item command="zh" :disabled="currentLanguage=='zh'">
          简体中文
        </el-dropdown-item>
        <el-dropdown-item command="en" :disabled="currentLanguage=='en'">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import {useI18n} from 'vue-i18n'
import {computed} from "vue";
import {useStore} from "vuex";

const i18n = useI18n()
const store = useStore()

const currentLanguage = computed(()=> i18n.locale.value)
const handleCommand = (lang: string) => {
  i18n.locale.value = lang
  store.commit('app/changeLang', lang)
  localStorage.setItem('lang', lang)
}
</script>

将lang值放到store/modules/app.ts中?

state: () => ({
  lang: localStorage.getItem('lang' || 'zh'),  // 中英文切换
}),
mutations: {
  changeLang(state: any, lang: string){
    state.lang = lang
  }
},

使用

1.标签中使用：

$t('menus.home')

2. ts中使用

import i18n from "@/i18n";
import {watchLang} from '@/i18n/language/index.ts'

const t = i18n.global.t
const initDriver = ()=>{
   driver=new Driver({
    opacity: 0.75,
    animate: false,  // 否则图标消失
    padding: 10,
    allowClose: true, //禁止点击外部关闭
    overlayClickNext: false,  //如果它在覆盖上移动到下一步，请单击
    doneBtnText: t('driver.doneBtnText'), // 完成按钮标题
    closeBtnText: t('driver.closeBtnText'), // 关闭按钮标题
    stageBackground: '#fff', // 引导对话的背景色
    nextBtnText: t('driver.nextBtnText'), // 下一步按钮标题
    prevBtnText: t('driver.prevBtnText'), // 上一步按钮标题
  })
}
//监听lang
watchLang(initDriver)

3.引入useI18n使用i18n

import {useI18n} from "vue-i18n";
const i18n = useI18n()

 ElMessage({
    message: i18n.t('message.updateSuccess'),
    type: 'success'
  })

?