vite+elementplus+i18n国际化

安装依赖

yarn add  element-plus vue-i18n 

1. i18n是否可以有同名键?

是可以的,但是同名键会被后加载的内容覆盖。

在 Vue I18n 中,多个语言文件合并时,相同的键名会按照最后合并的语言文件的值覆盖之前的值。例如:

const messages = {
  en: {
    key1: 'Value from file 1',
  },
  en: {
    key1: 'Value from file 2', // 这个会覆盖前一个文件的 key1
  },
};

解决方法:
尽量避免同名键的冲突。
使用命名空间(如页面或组件名)来区分。

2. 拆分国际化配置文件

目录结构示例

src/
├── locales/
│   ├── en/
│   │   ├── home.ts
│   │   ├── about.ts
│   ├── ja/
│   │   ├── home.ts
│   │   ├── about.ts
│   ├── index.ts

各页面的语言文件

  • locales/en/home.ts
export default {
  home: {
    welcome: 'Welcome to the home page',
  },
};
  • locales/ja/home.ts
export default {
  home: {
    welcome: 'ホームページへようこそ',
  },
};
  • locales/en/common.ts
export default {
  common: {
    changeLanguage: 'Change Language',
  },
};
  • locales/ja/common.ts
export default {
  common: {
    changeLanguage: '言語を変更する',
  },
};
  • 合并语言文件
    在 locales/index.ts 中合并拆分的语言文件:
import enHome from './en/home';
import enCommon from './en/common';

import jaHome from './ja/home';
import jaCommon from './ja/common';

const en = {
  ...enHome,
  ...enCommon,
};

const ja = {
  ...jaHome,
  ...jaCommon,
};

export const messages = {
  en,
  ja,
};

3. 配置 i18n

在 i18n.ts 中引入合并后的语言文件:

import { createI18n } from 'vue-i18n';
import { messages } from './locales';

const i18n = createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 备用语言
  messages,
});

export default i18n;

4. 使用命名空间解决同名冲突

如果不同页面使用了相同的键名,建议将每个页面的配置放在命名空间下。比如在 home.ts 文件中:

export default {
  home: {
    welcome: 'Welcome to the home page',
  },
};

在 home.ts 文件中:

export default {
  home: {
    welcome: 'Welcome to the about page',
  },
};

使用时需要明确路径:

<p>{{ $t('home.welcome') }}</p>
<p>{{ $t('about.welcome') }}</p>
  1. 测试效果
    在页面组件中使用:
<template>
  <div>
    <p>{{ $t('home.welcome') }}</p>
    <p>{{ $t('common.changeLanguage') }}</p>
  </div>
</template>

切换语言:
通过 i18n.global.locale 动态切换:
在@/locales/index.ts中声明

export const switchLanguage = (locale: 'en' | 'ja') => {
  i18n.global.locale = locale
}
  <div class="switch">
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('ja')">日语</button>
  </div>

// 动态更新语言包
function updateLocaleMessages(locale: string, newMessages: Record<string, any>) {
const currentMessages = i18n.global.getLocaleMessage(locale);
i18n.global.setLocaleMessage(locale, {
...currentMessages,
...newMessages, // 合并新内容
});
}

// 使用时调用
updateLocaleMessages('ja', { message: { goodbye: 'さようなら!' } });

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容