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

装置

npm install vue-i18n

配置

我这里创立了utils文件夹

> mkdir -p utils> vi i18n.jsimport 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>