快捷導(dǎo)航

vue項(xiàng)目實(shí)現(xiàn)國際化的基本思路與詳細(xì)步驟

更新時(shí)間：2024年04月12日 08:24:10 作者：努力搞米

國際化是指項(xiàng)目能夠根據(jù)不同國家的語言進(jìn)行轉(zhuǎn)換,便于不同國家的用戶使用,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)國際化的基本思路與詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

基本思路如下

① 定義語言包：需要幾種語言展示，就定義幾個(gè)語言包

② 創(chuàng)建對象，對語言包進(jìn)行整合，對象的 key 為語言包的引用，值為語言包對象

③ 創(chuàng)建 vue-i18n 類的對象，同時(shí)為其 messages 屬性為第②步創(chuàng)建的對象，為其 locale 屬性賦值為第②步中語言對象對應(yīng)的 key

④ 在創(chuàng)建 Vue 實(shí)例對象時(shí)，掛載 vue-i18n 類的對象

1.安裝vue-i18n

i18n是internationalization這個(gè)單詞的縮寫，取了首字母i和結(jié)尾字母n，中間一用有18個(gè)字母，所以組合起來就所寫成i18n，這是一個(gè)用于給vue國際化的插件，它可以輕松地將一些本地化功能集成到你的 Vue.js 應(yīng)用程序中

npm i vue-i18n@8.22.2

百度到8.22.2這個(gè)版本最完善，所以我就下了這個(gè)版本。

2.ElementUI多語言配置

引入element語言包文件src/lang/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n' // 引入國際化插件包
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui 英文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui 中文包
import customEN from './en'  // 自定義英語包
import customZH from './zh'  // 自定義中文包

Vue.use(VueI18n) // 全局注冊國際化包

const messages = {
    en: {
        ...customEN,
        ...elementEnLocale
    },
    zh: {
        ...customZH ,
        ...elementZhLocale
    }
}
export function getLanguage() {
    const chooseLanguage = Cookies.get('language')
    if (chooseLanguage) return chooseLanguage

    // 如果沒有選擇語言
    const language = (navigator.language || navigator.browserLanguage).toLowerCase()
    const locales = Object.keys(messages)
    for (const locale of locales) {
        if (language.indexOf(locale) > -1) {
            return locale
        }
    }
    return 'en' // 默認(rèn)語言
}
const i18n = new VueI18n({
    locale: getLanguage(),
    messages
})

export default i18n

3. 自定義內(nèi)容多語言配置

在src/lang 文件夾下創(chuàng)建自定義語言的js文件

|- src
           |-lang
                       |-index.js
                       |-en.js # 從資源包中拷入的
                       |-zh.js # 從資源包中拷入的

/src/lang/zh.js

export default {
    navbar: {
        welcomes: '歡迎使用',
        companyName: '后臺管理系統(tǒng)',
    },
}

/src/lang/en.js

export default {
    navbar: {
        welcomes: 'welcome to use',
        companyName: 'backstage management system',
    }
}

4.在main.js中掛載 i18n的插件

import i18n from '@/lang'

// 加入到根實(shí)力配置中
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

5.配置完成之后使用

在想要使用多語言的頁面，用t(‘屬性名’)來生成標(biāo)題。這里的t是引入了i18n之后，自動(dòng)掛載在vue實(shí)例上的功能。

<div class="dashboard-editor-container">
    {{ $t('navbar.welcomes') }} {{ $t('navbar.companyName') }}
</div>

手動(dòng)更改默認(rèn)語言后，看效果：

注：到這里已經(jīng)差不多完成了，還有個(gè)問題。就是如果使用了element-ui，element組件可能無法實(shí)現(xiàn)多語言。涉及到手動(dòng)處理 vue-i18n兼容性問題，官網(wǎng)已經(jīng)做了詳細(xì)介紹。

在main.js中加上一段這個(gè)代碼：

Vue.use(Element, {
  size: Cookies.get('size') || 'medium' ,  // set element-ui default size
  i18n: (key, value) => i18n.t(key, value) 
})

6.現(xiàn)在已經(jīng)實(shí)現(xiàn)了多語言切換的核心邏輯

不能夠動(dòng)態(tài)的更改，只能代碼手動(dòng)，下面封裝一個(gè)動(dòng)態(tài)切換語言的組件

6.1 目的：

6.2 封裝多語言切換組件

封裝一個(gè)切換語言的組件，放在公共組件的位置： src/components/Lang/index.vue

<template>
    <el-dropdown trigger="click" @command="changeLanguage">
      <div>
        <svg-icon class-name="international-icon" icon-class="language" />
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
        <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </template>
  
  <script>
  export default {
    computed: {
    language() {
      return this.$store.getters.language
    }
  },
    methods: {
      changeLanguage(lang) {
        this.$i18n.locale = lang // 設(shè)置給本地的i18n插件
        this.$store.dispatch('app/setLanguage', lang)
        this.$message.success('切換多語言成功')
      }
    }
  }
  </script>

6.3 全局注冊組件

把這個(gè)組件在main.js中進(jìn)行掛載到全局

import Lang from '@/components/Lang'

Vue.component('Lang', Lang)

6.4 在Navbar組件中引入使用組件或者是在想用該組件的地方引入

      <!-- 語言包 -->
      <Lang class="right-menu-item"></Lang>

效果:

總結(jié)

到此這篇關(guān)于vue項(xiàng)目實(shí)現(xiàn)國際化的基本思路與詳細(xì)步驟的文章就介紹到這了,更多相關(guān)vue項(xiàng)目國際化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片