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>
如果值为数组，不拿直接访问数组，需要依次取出下标
