vue中i18n的使用

阅读数:129 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

Vue I18n是Vue.js的国际化插件。

1、常见的语言格式

（1）JSON格式

JSON 是最常用的语言包格式。假设你有一个英语的语言包 en.json：

{
  "greetings": {
    "hello": "Hello",
    "goodbye": "Goodbye"
  }
}

（2）YAML格式

YAML 格式的语言包更加简洁，可读性也更强。假设你有一个英语的语言包 en.yaml：

greetings:
  hello: "Hello"
  goodbye: "Goodbye"

请注意，如果你使用 YAML 格式，你可能需要为 Vite 安装一个额外的插件来解析 YAML 文件：

npm install -D @rollup/plugin-yaml

然后在 vite.config.js 中添加对应的插件配置：

// vite.config.js
import yaml from '@rollup/plugin-yaml';

export default defineConfig({
  // ...
  plugins: [
    // ...
    yaml()
  ]
});

（3）JavaScript/TypeScript模块

你也可以使用 JavaScript 或 TypeScript 模块来定义语言包，这在你需要在语言包中包含一些逻辑时特别有用。以下是一个 JavaScript 模块格式的示例 en.js：

export default {
  greetings: {
    hello: 'Hello',
    goodbye: 'Goodbye'
  }
};

在 TypeScript 中，你还可以定义类型以增强类型安全，例如 en.ts：

export default {
  greetings: {
    hello: 'Hello',
    goodbye: 'Goodbye'
  }
} as const;

二、使用

1、安装

npm install vue-i18n

2、创建文件

（1）index.js

import enLocale from "./en-us";
import cnLocale from "./zh-cn";
import { createI18n } from "vue-i18n";
const messages = {
  zh_CN: {
    ...cnLocale,
  },
  en_US: {
    ...enLocale,
  },
};


 const i18n = createI18n({
  locale: getCookie("frontend_lang")||'en_US',
  fallbackLocale: "en_US",
  messages,
  allowComposition: true,
  legacy: false, // 组合式，you must set `false`, to use Composition API
});

export default i18n

（2）zh-cn.js/en-us.js

export default {
...
}

3、在main.js中引入文件index.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
import router from './router'
import i18n from "@/lang/index";


import './assets/main.css'

const app = createApp(App)

// app.config.globalProperties.t = t;

app.use(createPinia())
app.use(router)
for( const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(i18n);
app.mount('#app')

4、使用

（1）非组合式

   // 标签内使用
   <Button type="primary">{{$t('message')}}</Button>
   // 标签属性中使用
   <FormItem :label="$t('message')"></FormItem>
   // js 中使用
   this.$t('message')

（2）组合式

通过设定legacy: false，这样就可以setup中使用useI18n。

<template>
<div id="app">
  <p>{{ t("message.hello") }}</p>
</div>
</template>
<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
</script>

普通js工具类中使用

import i18n from '@/lang/index';
const { t } = i18n.global;

三、vite-plugin-vue-i18n

@intlify/vite-plugin-vue-i18n 是一个 Vite 插件，专门用于在 Vite 构建过程中处理 vue-i18n 的国际化资源。它可以帮助你加载语言文件并进行编译优化，以提高应用程序的性能。该插件能够自动扫描语言文件并生成相应的翻译消息模块，以便在应用程序中使用。

加载语言文件：该插件可以根据你的配置自动加载语言文件，这样你就可以将不同语言的翻译文本存储在单独的文件中，而不是硬编码在应用程序中。
编译优化：该插件可以在构建过程中对语言文件进行编译优化，以减少最终构建包的大小和加载时间。它会根据实际使用的翻译消息来裁剪和压缩语言文件，以确保只加载应用程序所需的部分。
自动生成翻译消息模块：该插件会根据加载的语言文件自动生成相应的翻译消息模块，以便在应用程序中使用。这样你就可以通过 $t 或 $tc 方法来访问和显示翻译文本。

通过结合使用 vue-i18n 和 @intlify/vite-plugin-vue-i18n，你可以轻松地实现 Vue.js 应用程序的国际化功能，并提供多语言支持，以满足不同用户的语言需求。

1、安装依赖

首先，你需要安装 vue-i18n 以及 @intlify/vite-plugin-vue-i18n 插件：

npm install vue-i18n@next @intlify/vite-plugin-vue-i18n --save

确保安装的是适用于 Vue 3 的 vue-i18n 版本。

2、配置vite插件

在 vite.config.js 文件中配置 @intlify/vite-plugin-vue-i18n 插件：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueI18n from '@intlify/vite-plugin-vue-i18n';

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, './path/to/locales/**')
    })
  ]
});

在这里，include 选项指向包含语言文件的目录。这个目录应该包含你的语言资源文件，例如 JSON

3、初始化vue-18n

import { createI18n } from 'vue-i18n'

// 动态导入语言资源文件
const messages = Object.fromEntries(
	Object.entries(
		import.meta.glob('@/i18n/locales/*.json',{eager:true})
	).map(([key, value]) => {
		const locale = key.split('/').pop().replace('.json', '');
		return [locale, value.default];
	})
);

// 提供一个方法来添加或更新语言包
export function loadLocaleMessages(messages) {
	const locale = i18n.global.locale.value; // 获取当前设置的语言
	Object.keys(messages).forEach((key) => {
		i18n.global.setLocaleMessage(key, messages[key]);
	});
	i18n.global.locale.value = locale; // 重新设置语言以确保更新
}
export const i18n = createI18n({
	legacy: false, // 启用 i18n Legacy 模式
	locale: 'zh', // 默认语言
	fallbackLocale: 'en', // 备用语言
	messages
})

秒吧学习