携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情 >>

背景

让网站实现多语言切换.

技术栈: vue3.2、typescript、pinia、localStorage、element-plus、vue-i18n

vue3国际化

npm i vue-i18n

配置

在src目录下新建locales文件，新建zh-cn.ts、en.ts、index.ts。

//zh-ch.ts
export default {
  buttons: {
    login: '登录'
  },
  menus: {
    home: '首页'
  }
}

//en.ts
export default {
  buttons: {
    login: 'Login'
  },
  menus: {
    home: 'Home'
  }
}

//index.ts
import { createI18n } from 'vue-i18n'
import zhCn from './zh-cn'
import en from './en'

// 创建 i18n
const i18n = createI18n({
  legacy: false,
  globalInjection: true, // 全局模式，可以直接使用 $t
  locale: localStorage.getItem('lang') || 'zhCn',
  messages: {
    zhCn,
    en
  }
})

export default i18n

在main.ts中引入

import i18n from './locales'

createApp(App).use(il8n)

使用

在template中使用

{{ $t('menus.home') }}

在typescript中使用

import i18n from '@/locales';
console.log(i18n.global.t('menus.home'));

element使用国际化

import zhCn from 'element-plus/lib/locale/lang/zh-cn';
const locale = ref(az)

<el-config-provider :locale="locale">
  <router-view />
</el-config-provider>

语言切换

利用i18n+pinia+localStorage实现

安装pinia

yarn add pinia 或者 npm install pinia

在main.ts中引入pinia

import {createPinia} from 'pinia'
app.use(createPinia())

在src下边新建store文件夹，在store文件夹下新建module新建locales.ts，实现模块化，在store文件夹下新建index.ts

//index.ts
import useLocales from './module/locales'

export default function useStore(){
  return {
    locales: useLocales()
  }
}

//module/locales
import { defineStore } from 'pinia'
import i18n from '@/locales'

export const useStore = defineStore('app', {
  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
    }
  }
})

export default useStore

在页面中引入

import useStore from '@/store/index';
const store = useStore();
const localChange = (value: string) => {
  store.locales.SET_LOCALE(value);
};

elementplus同步更新

//app.vue
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import en from 'element-plus/lib/locale/lang/en';
import useStore from './store/index'

<el-config-provider :locale="useStore().locales.$state.locale === 'zhCn'?zhCn:en">
  <router-view />
</el-config-provider>