vue3项目中实现国际化语言切换【直接粘贴即可】

使用的插件：vue-i18n

一、安装

npm install vue-i18n

二、引入+全局挂载

import i18n from '@/utils/i18n'
const app = createApp(App);
app.use(i18n);
// 全局挂载 t 函数
app.config.globalProperties.$t = i18n.global.t

三、新建目录

分为三块：组件封装、store封装、配置方法封装

目录位置如下：

组件代码（language/index.vue）：

<template>
  <div class="language-switcher">
    <div v-for="locale in i18nStore.availableLocales" :key="locale.code" class="language-option"
      :class="{ active: i18nStore.currentLocale === locale.code }" @click="switchLanguage(locale.code)">
      {{ locale.name }}
    </div>
  </div>
</template>

<script setup>
import { useI18nStore } from '@/store/i18n';
import { onMounted } from 'vue';

const i18nStore = useI18nStore();

const switchLanguage = (locale) => {
  i18nStore.setLocale(locale);
};
onMounted(() => {
  i18nStore.initLocale()
})
</script>

<style scoped lang="less">
.language-switcher {
  display: flex;
  font-size: 12px;
  margin-left: 10px;
}

.language-option {
  padding: 3px 8px;
  cursor: pointer;
  background-color: #ccc;
}

.language-option.active {
  background-color: #32C45D;
  color: white;
}
</style>

统一管理代码（store/i18n.js）：

import { defineStore } from "pinia";
import { ref } from "vue";
import i18n from "@/utils/i18n";

export const useI18nStore = defineStore("i18n", () => {
  // 当前语言
  const currentLocale = ref(i18n.global.locale.value);
  
  // 可用的语言列表
  const availableLocales = [
    { code: 'zh', name: 'ZH' },
    { code: 'en', name: 'EN' }
  ];
  
  // 切换语言
  const setLocale = (locale) => {
    if (availableLocales.some(l => l.code === locale)) {
      i18n.global.locale.value = locale;
      currentLocale.value = locale;
      
      // 保存到 localStorage，以便下次访问时恢复
      localStorage.setItem('locale', locale);
    }
  };
  
  // 初始化语言（优先使用localStorage存储的语言，其次使用系统语言）
  const initLocale = () => {
    console.log(navigator,'navigator.language')
    // 优先使用localStorage存储的语言
    const savedLocale = localStorage.getItem('locale');
    // 如果本地有值就更改配置
    if (savedLocale && availableLocales.some(l => l.code === savedLocale)) {
      setLocale(savedLocale);
      return;
    }
    // 其次使用系统语言
    const browserLang = navigator.languages[1];
    if (availableLocales.some(l => l.code === browserLang)) {
      setLocale(browserLang);
      return;
    }

    // 都没有则使用默认语言
    setLocale('zh');
  };
  
  return {
    currentLocale,
    availableLocales,
    setLocale,
    initLocale
  };
});

配置方法封装（utils/i18n/index.js）：

// src/i18n.js
import { createI18n } from 'vue-i18n';
import en from './locales/en';
import zh from './locales/zh';

const messages = {
  en,
  zh
}

const i18n = createI18n({
  legacy: false, // 使用 Composition API 模式
  locale: 'en', // 默认语言，在store里面统一管理，此配置无用
  fallbackLocale: 'en', // 回退语言
  messages // 语言包
})

export default i18n;

语言配置：

注意：所有的项目中的涉及到的语言切换的配置，需要在下面的en.js和zh.js中自行定义好，且需要一一对应，否则可能出现切换了不起作用的情况。

中文配置：utils/i18n/locales/en.js

export default {
    // 文件上传
    upload: {
        image: 'Image',
        camera: 'Camera',
        file: 'Document',
        maxFiles: 'You can only upload {count} files at most',
        fileSuccess: 'File uploaded successfully',
        invalidFileType: 'Please select a valid file type',
        fileSizeLimit: 'File size cannot exceed 10MB'
    },
    // 收藏夹
    favorite: {
        ...
    },
}

对应的英文配置：utils/i18n/locales/zh.js

export default {
    upload: {
        image: '图片',
        file: '行程文件',
        maxFiles: '最多只能上传{count}个文件',
        fileSuccess: '文件上传成功',
        invalidFileType: '文件类型不匹配，请重新上传',
        fileSizeLimit: '文件大小不能超过10MB'
    },
    favorite: {
        ...
    }
}

四、使用

### 使用方法 ###
已全局挂载$t：
### vue页面中：
  模版和script中直接通过 $t('x.y') 使用
    --x：模块名
    --y：实际名称
### 纯js文件中：
    1、引入：import i18n from "@/utils/i18n";
    2、使用：i18n.global.t('upload.image')
### 传变量：
    定义：用花括号包裹变量
        count: '({count})'
    使用：第二个参数用对象包裹
        $t('favorite.count', { count: option.count })
### 原因：
    $t 是 Vue 组件特有的，i18n.global.t 可以在任何 JavaScript 文件中使用的全局函数。在 store 文件中，应该使用 i18n.global.t 来进行国际化

组件使用案例：

1、纯展示

 

2、传参展示