vue3 国际化

实现网站多国语言切换

1、导入依赖

npm i vue-i18n --save

2、main.js文件中引入

import { createSSRApp } from "vue";

import App from "./App.vue";

import { createI18n } from "vue-i18n";

import messages from "./lang";

const i18n = createI18n({

  locale: "zh",//默认语言

  globalInjection: true,//全局使用

  legacy: false,//合法性。否则报错Not available in legacy mode

  messages,//语言文件

});

export function createApp() {

  const app = createSSRApp(App);

  app.use(i18n).mount("#app");

  return {

    app,

  };

}

createApp();

3、lang/index.js文件中，管理各语言文件

import enLocale from "./en";

import zhLocale from "./zh";

const messages = {

  en: {

    ...enLocale,

  },

  zh: {

    ...zhLocale,

  },

};

export default messages;

4、各语言文件内容

5、vue文件中使用

<div>{{ $t("route.dashboard") }}</div>

6、切换语言时

import { useI18n } from "vue-i18n";

const { locale } = useI18n();

locale.value = "en";