Vue2.x下使用vue-i18n国际化
npm上下载vue-i18nnpm install vue-i18n新建文件夹配置i18n// i18m文件夹下新建index.jsimport Vue from 'vue'import Vuei18n from 'vue-i18n'Vue.use(Vuei18n )import zh from './zh.js'import en from './en.js'const i18n = new V
·
- npm上下载vue-i18n
npm install vue-i18n
- 新建文件夹配置i18n
// i18m文件夹下新建index.js
import Vue from 'vue'
import Vuei18n from 'vue-i18n'
Vue.use(Vuei18n )
import zh from './zh.js'
import en from './en.js'
const i18n = new Vuei18n({
locale : localStorage.getItem('lang') || 'zh', // 语言
messages: { // 文案
zh, // 文案的中文版
en // 文案的英文版
}
})
export default i18n
- 配置中英文文案
// zh.js
export default {
commen : {
example1 : '哈哈哈哈哈',
example2 : '嘻嘻嘻'
}
}
// en.js
export default {
commen : {
example1 : 'sdasdasda',
example2 : 'dfdsdfdf'
}
}
- 挂载在main.js下
import i18n from '@/i18n/index'
new Vue({
router,
store,
i18n,
render: h => h(App),
}).$mount('#app')
5.在页面里使用
<p>{{$t('commen.example1')}}</p>
<p>{{$t('commen.example2')}}</p>
6.修改语言
this.$i18n.locale = 'zh'
更多推荐
已为社区贡献3条内容
所有评论(0)