vue3实现国际化的过程与遇到的问题详解

npm install vue-i18n

// zh.js
export default {
    login: {
        login: '登录',
        userName: '用户名'，
        passWord: '密码'
    }
}

// en.js
export default {
    login: {
        login: 'login',
        userName: 'userName'，
        password: 'password'
    }
}

// index.js
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

const messages = {
  en,
  zh,
}
const language = (navigator.language || 'en').toLocaleLowerCase() // 这是获取浏览器的语言
const i18n = createI18n({
  locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
  fallbackLocale: 'en', // 设置备用语言
  messages, 
})

export default i18n

import { createApp } from 'vue'
import i18n from './locals'

const app = createApp(App)
app.use(i18n)

app.mount('#app')

<div>
    {{`$t('login.userName')`}}
</div>
<div v-t="'login.password'"></div>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

console.log(t('login.useName'))
</script>

<template>
	<div class="menu">
    	<div class="menu-item" @click="changeLang('en')">English</div>
    	<div class="menu-item" @click="changeLang('zh')">中文</div>
    </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

const changeLang = (lang: string) => {
  locale.value = lang
  localStorage.setItem('lang', lang)// 重要！下面遇到问题里解释
}
</script>

<template>
	<div class="ilst">
    	 <div
            v-for="item in list"
            :key="item">
           {{item}}
   		 </div>
    </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { ref, computed } from 'vue'
const { t } = useI18n()
// 使用ref定义之后再改语言无效
//const list = ref([
//  t('c100018'),
// t('c100019'),
// t('c100020'),
// t('c100021'),
// t('c100020'),
])
// 采用computed可解决
const list = computed(() => [
  t('c100018'),
  t('c100019'),
  t('c100020'),
  t('c100021'),
  t('c100020'),
])

</script>

import { Locale } from 'vant'
import enUS from 'vant/es/locale/lang/en-US'
Locale.use('en-US', enUS)