VUE3+TS+Vite使用i18n国际化插件

VUE3+TS+Vite使用i18n国际化插件

1. 下载i18n插件

npm install vue-i18n

2. 在src目录下创建locals文件夹,包含index.ts,en.ts,zh.ts(只做中英文切换)

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

/zh.ts
export default {
    login: {
        login: '登录',
        userName: '用户名',
        password: '密码'
    }
}

/index.ts
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({
    legacy: false, //解决vue-i18n报错Uncaught (in promise) SyntaxError: Not available in legacy mode
    locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
    fallbackLocale: 'en', // 设置备用语言
    messages, 
  })
  
  export default i18n

3.最后在main.ts引入就好了

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

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

app.mount('#app')

此时浏览器的调试框可能会出现i18n的警告信息，可以在vite.config.ts文件中加入下面的代码

export default defineConfig({
  resolve:{
    alias: {
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js', //去除vue-i18n的警告信息
    }
  },
  })

在<template>中使用
要用到一个$t()的方法，或者使用v-t也行

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

在setup中使用

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

const { t } = useI18n()

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

vue-i18n提供了一个全局变量locale，直接修改即可

<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>

完结