vue.js3: i18n根据浏览器语言自动选择当前语言(vue@3.2.37 / vue-i18n@9.2.0-beta.36)

一，安装i18n库:

1,安装vue-i18n

liuhongdi@lhdpc:/data/vue/i18n$ npm install --save vue-i18n@next
 
added 7 packages in 5s

2,查看已安装的版本:

liuhongdi@lhdpc:/data/vue/i18n$ npm list vue-i18n
i18n@0.1.0 /data/vue/i18n
└── vue-i18n@9.2.0-beta.36

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/02/vue-js3-i18n-gen-ju-liu-lan-qi-yu-yan-zi-dong-xuan-ze-dang/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码：

1,添加用到的语言文字

 language/ch.js

module.exports = {
    menus: {
        Home: '首页',
        Goods: '商品',
        User: '用户',
        System: '系统',
    },
}

 language/en.js

module.exports = {
    menus: {
        Home: 'Home',
        Goods: 'Goods',
        User: 'User',
        System: 'System',
    },
}

 language/index.js

//引入vue-i18n
import { createI18n } from 'vue-i18n'

//得到默认使用的语言
const getDefaultLang = () => {
      //用户指定了默认语言时，使用用户指定的
      if (localStorage.getItem('lang') != null) {
          return localStorage.getItem('lang');
      } else {
          //用户未指定时，根据游览器选择:
          if (navigator.language == 'zh-CN') {
              return 'ch';
          } else if (navigator.language == 'en') {
              return 'en';
          } else {
              return 'en';
          }
      }
}

//注册i8n实例并引入语言文件
const i18n = createI18n({
    legacy:false,   //避免报错
    locale:getDefaultLang(),
    messages: {
        //引入两个语言文件
        ch:require('./ch.js'),
        en:require('./en.js')
    }
})
//export
export default i18n;

2,main.js引用

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './language/index'

const app = createApp(App)
app.use(i18n)
app.mount('#app')

3,页面上使用i18n：

 Home.vue

<template>
  <div>
    <div>{{$t('menus.Home') }}</div>
    <div>当前语言:{{langName}}</div>
    <div><button @click="setLang('ch')">中文</button><button @click="setLang('en')">English</button></div>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n'
import {onMounted,ref} from 'vue'

export default {
  name: "HomePage",

  setup() {
    //得到i18n的locale
    const {locale } = useI18n();
    //显示当前语言的名字
    const getLangName = (lang) => {
      if (lang == 'ch') {
        return '中文';
      } else if (lang == 'en') {
        return 'English';
      }
    }
    const  langName = ref('');
    //默认的语言
    onMounted(()=>{
      langName.value = getLangName(locale.value);
    });
     //指定语言
     const setLang = (lang) => {
       locale.value = lang
       localStorage.setItem('lang', lang)
       langName.value = getLangName(locale.value);
     }

      return {
        langName,
        setLang,
      }
  }

}
</script>

<style scoped>

</style>

三，一个报错的处理：

Uncaught (in promise) SyntaxError: Not available in legacy mode

如图:

解决:

createI18n时添加上 legacy:false

如下：

const i18n = createI18n({
    legacy:false,
    ...
})

三，测试效果

四，查看vue框架的版本:

liuhongdi@lhdpc:/data/vue/i18n$ npm list vue
i18n@0.1.0 /data/vue/i18n
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
├─┬ vue-i18n@9.2.0-beta.36
│ └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped