1.安装Vue项目国际化需要的包---vue-i18n
npm install vue-i18n
2. 配置文件
- 由于需要把i18n作为独立模块使用，所以配置不写在main.js中。而是配置之后导出挂在在Vue下
-
i18n的配置文件：
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入i18n
import locale from 'element-ui/lib/locale' // 引入element 国际化配置
import CN from './zh-CN' //自定义中文语言文件
import ID from './id.js' // 自定义印尼语言文件
Vue.use(VueI18n) // 混入Vue
// 创建实例并且挂在自定义语言包
const i18n = new VueI18n({
locale: 'cn', // 默认语言为中文
messages: {
cn: CN,
id: ID
}
})
locale.i18n((key, value) => i18n.t(key, value)) // 把element 的语言包挂在到i18n中
export default i18n // 导出实例
// 引入element 中文包
import cnLocale from 'element-ui/lib/locale/lang/zh-CN'
// 导出为meaasges
export default {
common: {
homepage: '首页',
logout: '登出'
},
audit: {
mobile: '手机号：',
app: '注册来源：',
submit: '提交',
error: {
empty: '请输入手机号',
uncorrect: '请输入正确的手机号'
}
},
...cnLocale // 混入element 中文包
}
import idLocale from 'element-ui/lib/locale/lang/id'
export default {
common: {
name: 'Sistem risiko',
homepage: 'halaman awal',
logout: 'keluar'
},
menu: {
audit: 'Analis'
},
audit: {
mobile: 'nomor telepon:',
app: 'sumber registrasi:',
submit: 'Kirim',
error: {
empty: 'masukkan nomor ponsel anda',
uncorrect: 'silakan masukkan nomor ponsel yang benar'
}
},
...idLocale
}
import Vue from 'vue'
import i18n from './i18n/' //引入i8n配置
import router from './router/'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store'
import App from './App'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
i18n, // 挂在在vue 下
render: h => h(App)
})
3. 使用
- 如果是在html 中使用，直接
$t('common.name')即可显示i18n的locale的对应的文件中的内容
// i18n index.js
const i18n = new VueI18n({
locale: 'cn', // 默认语言为中文
messages: {
cn: CN,
id: ID
}
})
// vue HTML
<div>$t('common.homepage')</div>
// 显示为<div>首页</div> ，$t()内对象属性要加引号
- 如果是在
vue 的js中使用，使用vue下挂载的i18n的t()
methods: {
audit() {
if (!this.phone || !this.phone.trim()) return this.$message.error(this.$i18n.t('audit.error.empty'))
if (!Number(this.phone)) return this.$message.error(this.$i18n.t('audit.error.uncorrect'))
}
}
- 语言切换
vue-i18n提供一个全局的locale参数，改变locale可以切换语言
changeLang() {
if (this.$i18n.locale === 'cn') {
this.$i18n.locale = 'id' //切换语言
this.$store.commit('changeLang', 'id')
} else {
this.$i18n.locale = 'cn' // 切换语言
this.$store.commit('changeLang', 'cn')
}
}
