前言:最近一个项目有英文版数据以及中文版数据,我就想将之做成两个语言版本的网页。
vue使用vue-i18n插件实现网页中英文切换
1:下载vue-i18n插件
npm install vue-i18n
2:自己定义中英文两套js文件
中文版js文件:
英文版js文件:
3:配置main.js文件
//引入中英文切换插件vue-i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 挂载
const i18n = new VueI18n({
locale: 'zh-CN', // 语言标识
messages: {
'zh-CN': require('./lang/zh'), // 通过require引入中文语言包
'en-US': require('./lang/en') // 通过require引入英文语言包
}
})
new Vue({
el: '#app',
render:h=>h(App),
router,
store,
i18n, // !!!!!一定要引入
})
4:通过点击事件切换语种
this.$i18n.locale = 'zh-CN' //切换为中文
this.$i18n.locale = 'en-US' //切换为英文
5:数据渲染
使用方式一:
<h3 class="myHotelList-bigTtitle">{{$t('m.hotelList')}}:</h3>
使用方式二:
<el-table-column
:label="$t('m.isOfficialRating')" //!!!!
min-width="120"
:formatter="formatterRating"
>