vue3 vue-i18n 国际化

一.配置

1.安装

npm install vue-i18n

2.目录结构

src 下新建 i18n 文件夹

3.index.ts配置

import { createI18n } from 'vue-i18n'
import en from './config/en';
import zh from './config/zh';
 
const i18n = createI18n({
    globalInjection: true, //全局生效 $t
    locale: localStorage.getItem('language') || 'zh', // 默认为中文
    messages: {
        zh,
        en
    }
})
 
export default i18n;

4.zh.ts

export default {
  messages: {
    username: '用户名',
    password: '密码',
  },
}

5.en.ts

export default {
  messages: {
    username: 'username',
    password: 'password',
  },
}

6.main.ts 引入

import i18n from './i18n/index.ts
// 不确定下面有没有用
createApp(App).use(ElementPlus,{
  i18n:(key,value) => i18n.t(key,value),
})

createApp(App).use(i18n).mount('#app')

二.在element-plus中的使用

1.在页面的模板中使用

1.    <el-input  :placeholder="$t('username')" />
2.    <div> {{ $t('password) }} </div>
3.    el-select 需要遍历的使用需要注意用法
    <el-select v-model="value" >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="$t(item.label)"
        :value="item.value"
      />
    </el-select>
---------------------
const value = ref('1')
const options = [
    {
        value: '1',
        label: '1',
    },
    {
        value: '2',
        label: '2',
    }
]

4.    或者第三种变形
 <div v-for="(item, index) in data" :key="index">
    <div class="msg">{{ item.msg }}</div>
</div>

<script>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
 
const data = [
  {
    msg: t("username"),
  },
  {
    msg: t("password"),
  },
];
</script>

2.在script中使用

import { useI18n } from 'vue-i18n'
const { t } = useI18n();
console.log(t('username'))

3.切换语言