vue3实现i18n国际化

Aurora_dzx

已于 2024-02-23 11:04:54 修改

阅读量253

点赞数 1

文章标签： vue.js 前端

于 2024-02-22 10:37:37 首次发布

本文链接：https://blog.csdn.net/d_2579/article/details/136226916

版权

本文详细介绍了如何在Vue项目中使用vue-i18n进行国际化配置，包括安装、全局导入、配置文件编写、语言库创建、翻译指令使用以及语言切换功能的实现。

摘要由CSDN通过智能技术生成

第一步：导入 i18n

npm install vue-i18n

第二部：配置全局导入 i18n

在 main.ts 中配置全局依赖

import i18n from './i18n';

const app = createApp(App);

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

第三步：编写 i18n index.ts文件

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

const messages = {
  en,
  zh,
};
const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('lang') || 'zh',
  //   fallbackLocale: "en",
  messages,
});
export default i18n;

第四步：编写语言库

英文 en.ts 文件

export default {
  messages: {
    username: 'username',
    password: 'password',
    login: 'Sign in',
    register: 'register',
    language: 'Language',
    chinese: 'Chinese',
    English: 'English',
    email: 'Email',
    HoldSession: 'Keep the session',
  },
};

中文 zh.ts 文件

export default {
  messages: {
    username: '用户名',
    password: '密码',
    login: '登录',
    register: '注册',
    language: '语言',
    chinese: '中文简体',
    English: '英文',
    email: '邮箱',
    HoldSession: '保持会话',
  },
};

第五步：使用

<!-- 第一种写法 -->
<h1>{{ $t('messages.username') }}</h1>

<!-- 第二种写法 :placeholder="$t('messages.username')" -->
<el-input type="text" :placeholder="$t('messages.username')"  />

<!-- 第三种写法 -->
<h1>{{ $t('messages.' + username) }}</h1>

<!-- 第四种写法 -->
<div v-t="'messages.username'"></div>

第六步：语言切换

<div>
  <el-dropdown trigger="click">
    <el-button class="language-btn">
        {{ $t('messages.language') }}
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="changeLang('zh')">
            中文简体
        </el-dropdown-item>
        <el-dropdown-item @click="changeLang('en')">
            English
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</div>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';

const { locale } = useI18n();
const changeLang = (lang: string) => {
  console.log('lang: ' + lang);
  locale.value = lang;
  localStorage.setItem('lang', lang);
};
</script>