国际化插件 vue-i18n
1.安装vue-i18n
npm install vue-i18n
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script
2.main.js中引入
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh-CN',
messages: {
'zh-CN': require('./lang/zh'),
'en-US': require('./lang/en')
}
})
new Vue({
el: '#app',
i18n,
store,
router,
template: '<App/>',
components: { App }
})
3.语言的切换
this.$i18n.locale = lang;
4.语言包
en.js 英文语言包
search: 'Search',
zh.js 中文语言包
search: '搜索'
5.只需要通过触发事件的形式,来控制 locale 的值,去调用对应的语言包就可以实现国际化
6.数据渲染的模板语法
<div>{{$t('search')}}</div>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步