Vue中使用i18n进行配置语言全球化

Posted 2021-09-13 邓锋

Vue中使用i18n进行配置语言全球化

安装

npm install vue-i18n

配置

我这里创建了utils文件夹

> mkdir -p utils
> vi i18n.js

import Vue from \'vue\'
import VueI18n from \'vue-i18n\'
Vue.use(VueI18n)

export default new VueI18n({
    locale: \'en\', 
    messages: {
        \'en\': require(\'./lang/en.json\')
    }
})

> mkdir lang
> vi en.json

{
    "document.account": "Account/Email",
    "document.content_empty": "Empty",
    "document.password": "Password",
    "document.tips.account": "Please input Account/Email",
    "document.tips.login_fail": "Wrong account or password",
    "document.tips.login_success": "Login successful",
    "document.tips.password": "Please enter the password",
    "document.tips.tip": "Tip",
    "document.directory": "Directory"
}

进入main.js中

import VueI18n from \'vue-i18n\';
import i18n from \'./utils/i18n\';
Vue.use(VueI18n);

new Vue({
    el: \'#app\',
    i18n,
    router,
    store
});

使用

# 方法中使用
this.$t(\'document.tips.login_success\')

# template中使用
<el-form-item :label="$t(\'document.password\')" prop="password" :rules="{ required: true, message: $t(\'document.tips.password\'), trigger: \'blur\' }">
    <el-input type="password" v-model="form.password"></el-input>
</el-form-item>