快捷導(dǎo)航

vue中i18n的安裝與幾種使用方式詳解

更新時(shí)間：2022年09月23日 15:04:00 作者：青衣瀏陽(yáng)

在一些網(wǎng)站經(jīng)常可以看到切換語(yǔ)言包,將網(wǎng)站轉(zhuǎn)化成多種語(yǔ)言版本的情況,下面這篇文章主要給大家介紹了關(guān)于vue中i18n的安裝與幾種使用方式的相關(guān)資料,需要的朋友可以參考下

vue中i18n安裝

1、在項(xiàng)目中安裝i18n

npm install vue-i18n

2、如果在一個(gè)模塊系統(tǒng)中使用它，你必須通過(guò) Vue.use() 明確地安裝 vue-i18n：

import Vue from 'vue' 
import VueI18n from 'vue-i18n'  
Vue.use(VueI18n)

項(xiàng)目中的使用

我們?cè)陧?xiàng)目中最多的是通過(guò)標(biāo)簽切換來(lái)轉(zhuǎn)換語(yǔ)言的顯示，

locale是控制顯示語(yǔ)言的配置

this.$i18n.locale=‘cn’

下面是完整的代碼

文件夾路徑

創(chuàng)建i18n文件夾放入你需要的語(yǔ)言和index.js文件

index代碼

import VueI18n from 'vue-i18n'
import Vue from 'vue'

//引入element的語(yǔ)言包
import localeLib from 'element-ui/lib/locale'  //本地
import enLocale from "element-ui/lib/locale/lang/en"; //英文
import zhLocale from "element-ui/lib/locale/lang/zh-CN";  //中文

// 引入需要語(yǔ)言包也可是js文件，export default拋出語(yǔ)言包的對(duì)象
import en from './lang/saas-en.json'
import zh from'./lang/saas-zh-CN.json'

Vue.use(VueI18n)

//獲取本地選擇的語(yǔ)言
var lang =
  Cookie.get("bx_user_lang") ||
  navigator.language ||
  navigator.userLanguage ||
  "en";
const i18n = new VueI18n({
  locale: lang, // 語(yǔ)言標(biāo)識(shí)
  fallbackLocale: 'zh-CN',
  messages: {
    en: Object.assign(en, enLocale),
    "zh-CN": Object.assign(zh, zhLocale)
  }
})
// 設(shè)置語(yǔ)言
localeLib.i18n((key, value) => i18n.t(key, value))
export default i18n

main.js

import i18n from './i18n/i18n'; 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    i18n, //很重要，別忘記
    components: { App },
    template: '<App/>'
})

使用方式組件里使用

<template>
    <div>
        <span>{{$t('message.text')}}</span> //使用方式1
        <p>{{title}}</p> //使用方式3
        <span v-text="$t('message.text')"></span>//使用方式2
        <el-select @change="langChange" placeholder="請(qǐng)選擇語(yǔ)言">
            <el-option v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            title:this.$t('message.text'),
            options:[
                { value: 'cn', label: '中文' },
                { value: 'en', label: 'English' }
            ]
        }
    },
    methods: {
        //語(yǔ)言切換
        langChange(e){
            localStorage.setItem('lang',e);
            this.$i18n.locale = e;
            window.location.reload()
        }
    }
}
</script>

使用方式j(luò)s

vue3中在頁(yè)面js使用有點(diǎn)不同 $t() 會(huì)掛載到proxy上，在js中使用proxy.$t()

 // 刪除人員
      const delMenu = async (row) => {
         await deletePerson(row)
         proxy.$message.success(proxy.$t("person.message.success.delete"))
         
      }

如果組件里沒(méi)有proxy呢

先定義一個(gè)轉(zhuǎn)換的方法translateTitle()

創(chuàng)建一個(gè)i18n.ts,寫(xiě)入下面代碼，返回一個(gè)translateTitle

import i18n from "@/i18n";
export function translateTitle(title: string) {
    const { t, te } = i18n.global
    if (te(`${title}`)) return t(`${title}`)
    return title;
}

組件中使用,方法還是一樣，是用自己定義的方法translateText，代替了proxy.$t.代碼如下

import { translateText } from "@/utils/i18n" //在組件中引入
import { ElMessage } from 'element-plus'
const tots=()=>{
	ElMessage.success(translateText('person.message.success'))
}

最后附上官方文檔的地址

https://kazupon.github.io/vue-i18n/zh/