vue + i18n 实现语言国际化

vue + i18n 实现语言国际化

准备：
1、安装i18n ： npm install vue-i18n
2、在main.js 文件中引入i18n ： import VueI18n from ‘vue-i18n’
3、在mian.js文件中使用：Vue.use(VueI18n)
4、创建语言包：

const messages = {
    zh: {
      message: {
        hello: '好好学习，天天向上！'
      }
    },
    en: {
      message: {
        hello: 'good good study, day day up!'
      }
    }
}

5、创建带有选项的 VueI18n 实例

const i18n = new VueI18n({
    locale: 'en', // 语言标识
    messages
})

6、把 i18n 挂载到 vue 根实例上

const app = new Vue({
    router,
    i18n,
    ...App
}).$mount('#app')

使用：
1、在 HTML 模板中使用

<div id="app">
    <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
  </div>

2、查看运行效果：

3、切换语言
我们刚才选定的语言标识是 “en” 英语，现在改成 “zh” 中文，并查看效果

const i18n = new VueI18n({
    locale: 'zh', // 语言标识
    messages
})

这样就可以轻松实现国际化了，实际开发中，页面内容肯定是很多的，我们可以把对应语言的信息保存为不同的 json对象

以上是i18n基础用法；
vue+i18n+浏览器自动识别切换
应用环境：
当开发海外产品时，需要获取用户手机系统语言类型，从而，自己选择对应的语言包

文件结构：

i18n文件是为了如果全部写在mian.js中，会导致mian.js文件混乱，从而将i18n文件分离出来，方便后期维护；

将所需的语言文字包，放入langs文件夹下，比如图中：中文cn.js;英文en.js

通过langs文件夹下index.js文件将所有语言包导出

创建带有选项的 VueI18n 实例
在mian.js中进行引入文件，并进行挂载


接下来便能在html文件中使用了

<div id="app">
    <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
  </div>

js 中的国际化写法

// JS
data () {
    return {
      brands: [this.$t('brands.nike'), this.$t('brands.adi'), this.$t('brands.nb'), this.$t('brands.ln')]
    }
 },

查看编译效果：
目前国际化已经实现，但是自动识别还没有实现，要实现该功能，首先要获取浏览器或者系统语言类型：window.navigator.language

并在页面加载时，执行此方法就行

ps:如果后端接受语言类型，是自己命名，那么前端还需在请求时做一定的调整：

Axios.defaults.headers.common['Accept-Language'] ='in'