Vue3 + vue-i18n 多语言切换

1、下载vue-i18n:

npm i vue-i18n@next

2、新建三个语言相关文件：

image.png

2.1、index.js:

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

const i18n = createI18n({
  locale: localStorage.getItem('language') || 'zh', // 定义默认语言为中文
  messages: {
    zh,
    en,
  },
});
export default i18n;

2.2、en.js:

export default {
  language: {
    index: "I'm six"
  }
}

2.3、zh.js:

export default {
  language: {
    index: "我是老六"
  }
}

3、main.js:

import vueI18n from '@/lang/index'
createApp(App).use(vueI18n).mount('#app')

4、多语言使用、多语言切换 -- index.vue: