vue手动国际化

vue版本、要求

1. vue2
2. Node:15.13
3. element UI
4. 下载vue-i18n

i18n导入

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from '@/api/language/language.en_US'
import usLocal from '@/api/language/language.zh_CN'

// element-ui 组件国际化
import ElementLocale from 'element-ui/lib/locale'
import elementEnLocal from "element-ui/lib/locale/lang/en"
import elementZhCNLocal from "element-ui/lib/locale/lang/zh-CN"

ElementLocale.i18n((key, value) => i18n.t(key, value))

Vue.use(VueI18n);
const messages = {
en_US: {
  ...enLocale,
  ...elementEnLocal
},
zh_EN: {
  ...usLocal,
  ...elementZhCNLocal
}
}
const i18n = new VueI18n({
locale: localStorage.getItem('lang') || 'zh_EN', // 通过this.$i18n.locale的值实现语言切换
messages,
});


export default i18n;

main.js

// 语言国际化
import i18n from "@/api/i18n"

new Vue({
el: "#app",
router,
i18n,
store,
render: (h) => h(App),
});

语言文件示例

//中文
export default {
    "language": "语言",
    username :'账号',
    systemManage:'后台管理系统',
    password:'密码',
    stroage:'仓库',
    login:'登录',
    loading:'登 录 中 ...',
    inputUsername:'请输入账号',
    inputPassword:'请输入密码',
    inputStorage:'请选择仓库',
    inputVerificationCode:'请输入验证码'

}

//英文
export default {
    "language": "language",
    username :'username',
    systemManage:'backstage management system',
    password:'password',
    stroage:'storage',
    login:'login',
    loading:'loading ...',
    inputUsername:'Please enter your account number',
    inputPassword:'Please enter password',
    inputStorage:'Please select a warehouse',
    inputVerificationCode:'Please enter the verification code'
}

使用

js中: this.$i18n.t('login.inputYourCount')

vue中:{{ $t('login.loading') }}