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')}
}
}