1、安装

$ npm i vue-i18n

2、配置

1、创建 utils/i18n.js
2、编辑 utils/i18n.js

// i18n.js
import {
    createI18n
} from 'vue-i18n';

const messages = {
    cn: {
        country: '中文',
        common: {
            login: '登录',
            toVip: '升级VIP'
        },
        loginPage: {
            mobile: '手机短信',
            wechatLogin: '使用微信扫一扫登录',
            privacyPolicy: '隐私政策'
        }
    },
    en: {
        country: 'English',
        common: {},
        loginPage: {}
    },
    tc: {
        country: '中文繁体',
    },
    mys: {
        country: 'Bahasa Melayu',
    },
    sa: {
        country: 'العربية',
    }
};

const i18n = createI18n({
    locale: 'cn', // set default locale
    fallbackLocale: 'en',
    messages, // set locale messages
});

export default {
    i18n, // vue绑定用
    messages // 手动选择国际化需要使用
};

3、引入

• main.js

import i18nObj from './utils/i18n.js';

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

• yourComponent.vue 国际化手动选择代码

// setup
import i18nObj from '../utils/i18n.js'

const Countries = reactive([]) // 语种列表，用来下拉让用户选择
const currCountry = ref('中文')

// 初始化语种、并缓存
for (let c in i18nObj.messages) {
    Countries.push(c)
    if (!localStorage.getItem('country')) {
        localStorage.setItem('country', '中文')
    } else {
        currCountry.value = localStorage.getItem('country')
    }
}

function changeLocale(newLocale) {
    locale.value = newLocale;
}

function commandClick(key) {
    changeLocale(key)
    currCountry.value = i18nObj.messages[key].country
    localStorage.setItem('country', i18nObj.messages[key].country)
}

<el-dropdown @command="commandClick" size="small" type="primary">
  <el-text>{{ currCountry }}</el-text>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item v-for="c in Countries" :key="c" :command="c">
        {{ i18nObj.messages[c].country }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

4、 yourComponent.vue 国际化引入数据

<div>{{ $t('cuntry') }}<div>
<div>{{ $t('loginPage.mobile') }}<div>

如果值为数组，不拿直接访问数组，需要依次取出下标