VUE3+TS+Vite は i18n 国際プラグインを使用します
- i18n プラグインをダウンロード
npm install vue-i18n
- src ディレクトリに、index.ts、en.ts、zh.ts を含む locals フォルダーを作成します (中国語と英語の切り替えのみ)
/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 は、直接変更できるグローバル変数ロケールを提供します。
<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>
終わり