Vue3国际化（vue3+pinia+vue-i18n）

在现代的前端项目中，国际化（i18n）是一个常见的需求，特别是当我们需要支持多语言时。本文将介绍如何在 Vue 3 项目中使用 Pinia 和 Vue I18n 来实现中英文切换的效果，并采用 TypeScript 进行开发。

目录

1. 项目初始化

1.1 vue3项目搭建

1.2 安装插件

2. 插件配置

2.1 Pinia配置

2.2 Vue I18n配置

2.3 插件注册

3. 功能实现

4. 功能展示

---

1. 项目初始化

1.1 vue3项目搭建

准备一个vue3项目，下面是利用vite搭建的（比较快）

具体操作可以见我其他文章

pnpm create vite
cd objectName
pnpm i
pnpm dev

1.2 安装插件

安装pinia和vue-i18n插件

Pinia是 Vue 的专属状态管理库，允许你跨组件或页面共享状态

Vue I18n 是 Vue 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue应用程序中

pnpm add pinia vue-i18n
​
// 其他包管理器
npm i pinia vue-i18n
yarn add pinia vue-i18n

2. 插件配置

2.1 Pinia配置

创建locale小仓库，用于存放关于语言的变量src/store/localeStore.ts

定义切换语言的方法

// src/store/localeStore.ts
​
import { defineStore } from 'pinia'
import i18n from "../utils/lang";
​
const useLocaleStore = defineStore('locale', {
    state: () => {
        return {
            locale: localStorage.getItem('lang') || 'zhCn',
        }
    },
    actions: {
        SET_LOCALE(locale: any) {
            // console.log(locale)
            this.locale = locale
            localStorage.setItem('lang', locale)
            i18n.global.locale.value = locale
        },
    },
    getters: {},
})
​
export default useLocaleStore

2.2 Vue I18n配置

创建根文件src/utils/lang/index.ts，做基本配置

创建两个文件lang/en.ts和lang/zh-ch.ts，存放中英文数据并在根文件调用

ps：也可以直接建一个i18n.ts文件全放进去，我这样写是为了提高项目的可维护性以及复用性

PS：两个文件的变量名要一致！不然无法切换！

// src/utils/lang/index.ts
​
import { createI18n} from "vue-i18n";
import zhCn from './zh-ch.ts'
import en from './en.ts'
​
const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: localStorage.getItem('lang') || 'zhCn',
  messages: {
    zhCn,
    en,
  },
})
​
export default i18n
// lang/en.ts
​
export default {
  msg:{
    hello:'你好，世界！'
  }
}
// lang/zh-cn.ts
​
export default {
  msg:{
    hello:'Hello, world!'
  }
}

2.3 插件注册

在主文件中注册插件

// main.ts
​
import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import {createPinia} from "pinia"
import i18n from "./utils/lang";
​
const pinia = createPinia()
const app = createApp(App)
​
app.use(pinia)
app.use(i18n)
app.mount('#app')

3. 功能实现

{{ $t('msg.hello') }}获取i18n定义的变量数据

点击按钮后判断小仓库语言，进行中英切换

<template>
  <div>
    <button @click="changeLocale">{{localeStore.locale==='zhCn'?'中文 / English':'English / 中文'}}</button>
    <h1>{{ $t('msg.hello') }}</h1>
  </div>
</template>
​
<script lang="ts" setup>
​
import useLocaleStore from "../store/localeStore.ts";
​
const localeStore = useLocaleStore()
​
const changeLocale = () => {
  let temp = localeStore.locale === 'zhCn' ? 'en' : 'zhCn'
  localeStore.SET_LOCALE(temp)
}
defineOptions({name: 'Locale'})
</script>
​
<style scoped></style>

4. 功能展示

---

蟹蟹你的浏览~~~