【前端】国际化实现过程

过程

安装依赖，配置，当点击中英文切换按钮时候，全局变换，element-plus组件也需要中英文切换。

确定初始化的语言在setting中，页面加载会读取里面的语言走一次语言的初始化配置，后面就是按钮切换

代码

仅供参考

安装

shell 复制代码

 "vue-i18n": "^9.10.1",

main.js

js 复制代码

import i18n from '@/lang/index' // 国际化
app.use(i18n) //中英切换

src下新建文件夹lang，再新建package文件夹同级别index.js

js 复制代码

import { createI18n } from 'vue-i18n'
import Elp_ZhCn from 'element-plus/dist/locale/zh-cn.mjs'
import Elp_en from 'element-plus/dist/locale/en.mjs'

// 本地语言包
import enLocale from './package/en.json'
import zhCnLocale from './package/zh-cn.json'

const messages = {
  // 'zh-cn': {
  //   ...zhCnLocale
  // },
  zh: {
    ...zhCnLocale,
    ...Elp_ZhCn,
  },
  en: {
    ...enLocale,
    ...Elp_en,
  },
}

const i18n = createI18n({
  legacy: false,
  locale: window.localStorage.getItem('language') || 'zh',
  messages: messages,
})

export default i18n

package下的en.json和zh-cn.json，类似下面

json 复制代码

  "days": "天",

  "days": "days",

一开始确认默认的语言.main.js中配置ep的

js 复制代码

<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view />
  </el-config-provider>
</template>
<script setup>
import { ElConfigProvider } from 'element-plus'
import { useAppStore } from '@/store/modules/app.js'
const appStore = useAppStore()

console.log('ep的语言为：', appStore.locale.name)
</script>

走小仓库app.js

js 复制代码

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'
import defaultSettings from '@/setting'

// 导入 Element Plus 中英文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'

// setup
export const useAppStore = defineStore('app', () => {
  // state
  const device = useStorage('device', 'desktop')

  const size = useStorage('size', defaultSettings.size)
  console.log('🚀初始化的 ~ useAppStore ~ defaultSettings.language:', defaultSettings.language)
  const language = useStorage('language', defaultSettings.language)
  console.log('🚀初始化的 ~ useAppStore ~ language:', language)
  const sidebarStatus = useStorage('sidebarStatus', 'closed')
  const sidebar = reactive({
    opened: sidebarStatus.value !== 'closed',
    withoutAnimation: false,
  })
  // const documentTitle = useStorage('documentTitle', defaultSettings.title);
  document.title = defaultSettings.title
  const activeTopMenu = useStorage('activeTop', '')

  /**
   * 根据语言标识读取对应的语言包
   */
  const locale = computed(() => {
    if (language?.value == 'en') {
      return en
    } else {
      return zhCn
    }
  })

  // actions
  function toggleSidebar() {
    sidebar.opened = !sidebar.opened
    sidebar.withoutAnimation = false
    if (sidebar.opened) {
      sidebarStatus.value = 'opened'
    } else {
      sidebarStatus.value = 'closed'
    }
  }

  function closeSideBar(withoutAnimation) {
    sidebar.opened = false
    sidebar.withoutAnimation = withoutAnimation
    sidebarStatus.value = 'closed'
  }

  function openSideBar(withoutAnimation) {
    sidebar.opened = true
    sidebar.withoutAnimation = withoutAnimation
    sidebarStatus.value = 'opened'
  }

  function toggleDevice(val) {
    device.value = val
  }

  function changeSize(val) {
    size.value = val
  }
  /**
   * 切换语言
   *
   * @param val
   */
  function changeLanguage(val) {
    language.value = val
  }
  /**
   * 混合模式顶部切换
   */
  function changeTopActive(val) {
    activeTopMenu.value = val
  }
  return {
    device,
    sidebar,
    language,
    locale,
    size,
    activeTopMenu,
    toggleDevice,
    changeSize,
    changeLanguage,
    toggleSidebar,
    closeSideBar,
    openSideBar,
    changeTopActive,
  }
})

其中setting是自定义的配置

js 复制代码

// import logo from '@/assets/images/error_images/401.png' // 使用相对路径导入图片
//用于项目logo|标题配置
export default {
  title: 'Lucky_Star', //项目的标题
  logo: '/logo.svg', //项目public下的
  // logo: logo, //项目logo设置
  logoHidden: true, //logo组件是否隐藏设置
  language: 'zh', // zh| en
  fixedHeader: true,
  tagsView: false,
  sidebarLogo: true,
}

按钮切换

js 复制代码

import i18n from '@/lang'

import { useAppStore } from '@/store/modules/app.js'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const appStore = useAppStore()

const changeLanZ = () => {
  console.log('切为中文')
  locale.value = 'zh'
  i18n.global.locale.value = 'zh'
  appStore.changeLanguage('zh')
}

const changeLanE = () => {
  locale.value = 'en'
  console.log('切为英文')
  i18n.global.locale.value = 'en'
  appStore.changeLanguage('en')
}