【记录】Vue3 中使用 vue-i18n 多语言。

一、踩坑记录
开始时候在网上搜罗一大堆的相关帖子，都是告诉你怎么用，却不说一些细节要点，
导致后面安装使用出现了一系列的错误浪费时间。特此记录一下。

cnpm install vue-i18n //只适用于 vue2 的版本
cnpm install vue-i18n@next // vue3 安装这版

Vue3版 vue-i18n：传送门>>>

二、使用方案
创建 i18n 文件夹，里面包含三个文件。
1、index.js（主入口）

import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

const i18n = createI18n({
   // 如果本地有语言标识就采用本地，没有就根据浏览器语言默认标识显示语言
   locale: localStorage.getItem('locale') || navigator.language.slice(0, 2),
   messages:{
      zh,
      en
   }
});
export default i18n;

2、zh.js（中文翻译）

export default {
  home:{
    name:"首页"
  }
}

3、en.js（英文翻译）

export default {
  home:{
    name:"Home"
  }
}

4、在 main.js 中引入

import vueI18n from './i18n'

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

5、在页面中使用

<div>{{ $t('home.name') }}</div>

6、语言切换

//为什么要引入文件使用，而不是直接解构 Vue 原型上的 i18n 使用下面会说。
import i18n from "@/i18n/index";

function seleLanguage(index){
  const idx = ['zh','en'][index] || navigator.language.slice(0, 2);
  localStorage.setItem("locale",idx);
  i18n.global.locale = idx;
}

三、注意要点
1、要安装的是 vue-i18n@next 而不是 vue-i18n；
2、多语言根据环境应该是检测地区 IP 段确定地区语言，但是图方便就采用了浏览器语言标识。（暂时没发现什么问题）
3、切换时经过测试，如果使用定义在 vue 原型上的 i18n 刷新后会经常性找不到，弄其它东西后再切换语言会失败，故此直接引入 i18n 会更方便。