vue3使用vue-i18n实现国际化多语言

wxzYa

已于 2023-10-24 18:10:08 修改

阅读量384

点赞数

文章标签：前端 vue.js 1024程序员节

于 2023-10-24 18:05:14 首次发布

本文链接：https://blog.csdn.net/qq_44415875/article/details/134018003

版权

vue项目需要实现多语言切换，那就使用vue-i18n吧，我这里是vue3项目实现中文/英文/藏文的切换，非常详细

安装vue-i18n，我目前是9.5.0

npm install vue-i18n@9

创建一个js文件，我在src目录下创建了i18n.js

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false,  // 没有该参数会报错
  locale: localStorage.getItem("currentLang") || 'CH', // 默认语言
  messages: {
    CH: {
        // 中文翻译
        signUp: '注册',
        signIn: '登录',
        signOut: '退出登录',
    },
    EN: {
      // 英语翻译
      signUp: 'sign up',
      signIn: 'sign in',
      signOut: 'sign out',
    },
    TIB: {
      // 藏语翻译
      signUp: 'གསར་དུ་ཐོ་འགོད།',
      signIn: 'ཐོ་འགོད།',
      signOut: 'ཐོ་འཇུག་ནས་ཕྱིར་འབུད་བ།',
    }
  }
})

export default i18n

在main.js文件中引入以上js文件

import i18n from './i18n'
app.use(i18n)

接下来就可以做显示以及切换语言啦

// 切换语言按钮
<span
      class="cursor-p"
      :class="{ active: currentLang == 'EN' }"
      @click="clickHandle('EN')"
      >EN</span
    >
 <span
      class="cursor-p"
      :class="{ active: currentLang == 'CH' }"
      style="margin: 0 10px"
      @click="clickHandle('CH')"
      >CH</span
    >
<span
      class="cursor-p"
      :class="{ active: currentLang == 'TIB' }"
      @click="clickHandle('TIB')"
      >TIB</span
    >
    
// 显示使用$t
<span v-if="!token">
      <span class="cursor-p" @click="$router.push('/register')">
        {{ $t('signUp') }}
      </span>
      <span>/</span>
      <span class="cursor-p" @click="$router.push('/login')">
        {{ $t('signIn') }}
      </span>
 </span>

// vue3不能使用this.$xxx，而是这样做
<script setup>
	import { useI18n } from 'vue-i18n';
	const { locale } = useI18n();
	const clickHandle = (type) => {
	  locale.value = type;
	
	  //存储到localstorage
	  localStorage.setItem("currentLang", type);
	};
</script>