vue-i18n实现接口的国际化

559 阅读1分钟

国际化利用vue-i18n实现

1.首先要有数据源 中英文数据数据包

2.语言变量

3.创建一个vue-i18n的实例 在进行一些配置 legacy: false标识使用composition API进行使用 globalInjection: true表示全局注册$t方法

4.全局注册实例 app.use(i18n)

5.创建一个组件进行对语言的切换,因为是locale变量在vuex中state存储的,当点击一个其他的语言时,就会触发mutation,进行locale状态的修改,这样就实现了国际化

6.接口的国际化: 请求中配置accept-language = loacle,后端就会根据语言变量返回该语言的数据