【前端】国际化实现过程

过程

安装依赖,配置,当点击中英文切换按钮时候,全局变换,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')
}
相关推荐
开开心心就好29 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享30 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js