Vite + Vue3导入 vue-i18n 插件

使用 Vite + Vue3导入 vue-i18n 插件

Step 1 下载 vue-i18n 插件

npm install vue-i18n

Step 2 新建 local 文件夹，创建 index.js

index.js

import { createI18n } from "vue-i18n";

// 导入你自己创建的语言 js 文件
import zhHant from "./zh-Hant";
import zhHans from "./zh-Hans";
import en from "./en";

// 创建 i18n 对象
const i18n = createI18n({
  legacy: false,
  globalInjection: true, // 全局模式，可以直接使用 $t
  locale: localStorage.getItem("lang") || "zh-TW",
  messages: {
    "zh-TW": zhHant,
    "zh-CN": zhHans,
    en,
  },
});

export default i18n;

语言文件示例：

en.js

export default {

  menus: {
    header: {
      home: "Home"
    },
    footer: {
      copyright: "copyright: MosterSeven.",
    },
  },
  page: {
    text: {
      info: "Hello World !",
    },
  },
  
};

Step 3 在 main.js 里挂载 vue-i18n

main.js

import { createApp } from "vue";

import App from "./App.vue";

// 导入刚刚创建的 index.js 文件
import i18n from "./locales/index";



const app = createApp(App);

app.config.globalProperties.$i18n = i18n;
app.use(i18n).mount("#app");

export default app;

Step 4 修改 vite.config.js

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias:{
	     "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
    }
  },

Step 5 使用

• template 里使用

<template>
	<div> {{ $t("menus.header.home") }} </div>
</template>

使用效果如下:

<div>Home</div>

• js / ts 里使用

import i18n from './locales' 

console.log(i18n.global.t('menus.home'))