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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。