npm install vue-i18n
在main.js中引入vue-i18n
import VueI18n from 'vue-i18n'
import LangEn from '../static/en'
import LangZhCHS from '../static/zhCHS'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en', // 语言标识
messages:{
'en': LangEn,
'zhCHS': LangZhCHS,
}
})
挂载到Vue的实例上
new Vue({
el: '#app',
router,
i18n,
template: '<App/>',
components: { App }
})
en.js里为
module.exports={
message: {
hello: 'hello',
about: 'about',
welcome: "Welcome"
}
} 用发为
{{ $t("message.welcome") }}
在js中去掉双引号,,如果插件里用值的话应用this指向
属性中用法
:placeholder="$t('placeholder.enter')"
遇到的问题: 绑定在data中的值,在切换中英文时不会自动更新,正在寻找解决办法,如有高手知道,可以指点一二。
2018.03.22自答: 去 vue-i18n 提了 issue 才知道是我对 vue 理解不够深刻, 绑定在data中不会自动更新的原因是 Vue 组件中的 data 属性只会在组件实例化时候后计算一次 解决办法是,写在 computed props 里
https://github.com/kazupon/vue-i18n/commit/d007ac8e91261dda63eb9ce95cf2b7bb73bf7968
props: {
dialogTitle:{
type: String,
default: ()=>{this.$t('notice')}
}
}
|