Vue3国际化 vue-i18n插件使用

原创已于 2023-10-12 14:28:59 修改 · 393 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-09-26 16:02:12 首次发布

本文介绍了如何在Vue.js项目中使用vue-i18n实现多语言支持，包括npm安装、i18n文件结构、配置、以及两种不同方式的中英文切换方法。

安装

// npm安装
npm install vue-i18n -S

使用

src下面新文件夹i18n/lang

lang文件夹下面新建两个文件分别为en.ts和zh.ts

// src/i18n/lang/en.ts
export default {
  login: {
    login: "login",
    userName: "userName"
  }
}

// src/i18n/lang/zh.ts
export default {
  login: {
    login: "登录",
    userName: "用户名"
  }
}

在lang文件夹下新建index.ts

// src/lang/index.ts
import { createI18n } from 'vue-i18n'
// 引入模块
import zh from './lang/zh'
import en from './lang/en'

const i18n = createI18n({
  // 浏览器语言
  locale: localStorage.getItem("lang") || "zh",
  messages: {
    zh, en
  }
})

export default i18n;

在main.ts中引入

// main.ts
import { createApp } from 'vue';
import i18n from './i18n/index';
import App from './App.vue';

const app = createApp(App);
app.use(i18n);
app.mount('#app');

使用方式

中英切换方式1

<template>
  <div>
    <h2>{{ $t('login.login') }}</h2>
    <button @click="chinese('zh')">中文</button>
    <button @click="english('en')">英文</button>
  </div>
</template>
<script setup lang="ts">
import i18n from './i18n'
// 点击切换中文、英文
const chinese = (lang: any) => {
  i18n.global.locale = lang
  localStorage.setItem("lang", lang)
}
const english = (lang: any) => {
  i18n.global.locale = lang
  localStorage.setItem("lang", lang)
}
</script>

中英切换方式2

<template>
  <div>
    <h2>{{ $t('login.login') }}</h2>
    <button @click="chinese('zh')">中文</button>
    <button @click="english('en')">英文</button>
  </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const chinese = (lang: any) => {
  locale.value = lang
  localStorage.setItem("lang", lang)
}
const english = (lang: any) => {
  locale.value = lang
  localStorage.setItem("lang", lang)
}
</script>