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

vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)

 更新時間：2022年12月02日 14:59:15   作者：一只愛吃糖的小羊  
所謂的vue-i18n國際化方案就是根據它的規(guī)則自己建立一套語言字典,對于每一個字（message）都有一個統(tǒng)一的標識符,下面這篇文章主要給大家介紹了關于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關資料,需要的朋友可以參考下

vue項目里多語言工具一直用的vue-i18n。

以前用的 vue2，也沒啥大問題，就是配置好之后用t(“你的屬性名”)就行，現(xiàn)在用vue3其實本來也沒太大變化。

但是配置完之后，在html中用$t()沒有問題，顯示文案什么的一切正常。而在ts中使用$t()方法報錯，后來才發(fā)現(xiàn)是我沒有設置全局的$t()方法。

記錄一下在vue3中使用vue-i18n的方法：

  • 安裝vue-18n
  • 配置
  • 應用
  • 掛載全局方法$t以方便在ts中使用（本次記錄的重點）

由于1.2.3.好多人寫過了，我就簡單的寫一下，本次記錄的重點是4，因為我發(fā)現(xiàn)網上好多博客都只寫了$t在html中的使用，但是大都沒提到在ts中也可能用到。

1.安裝

npm install vue-i18n@next 或 yarn add vue-i18n@next

2.在 src 目錄下新建 lang 并新建 index.ts 文件

import App from '@/App.vue'
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import enLocale from './en/index';
import zhLocale from './zh/index';

const messages = {
    zh: zhLocale,
    cn: zhLocale,
    en: enLocale,
    us: enLocale,
    
}

const localLang = navigator.language.split('-')[0];
const storageLang = window.localStorage.getItem('locale')?.split('"')[1].split('"')[0].toLocaleLowerCase() || 'en';
const c = (storageLang.toLocaleLowerCase() !== 'zh' && storageLang.toLocaleLowerCase() !== 'en') ? 'en' : storageLang;

const i18n = createI18n({
    globalInjection: true, //全局生效$t
    locale: c || localLang || 'en',
    messages,
    legacy: false,
})

const app = createApp(App)
app.use(i18n)

上圖中兩個語言包的index.ts中的內容自己根據語言需要寫：

export default {
    nNation: 'Country/Region',
    pleaseInput: 'Account',

}

在ts中使用全局方法$t

import { getCurrentInstance } from "vue";
const { appContext : { config: { globalProperties } } } = getCurrentInstance();  // 這里可以根據需要寫個hook
console.log(globalProperties.$t('pleaseSelectNation'))

在html中的使用就比較正常了：

<span>{{ $t("nation") }}</span>

其實本文算是新手記錄一下對于globalProperties的使用，希望對您有所幫助。

總結

到此這篇關于vue3使用vue-i18n(ts中使用$t, vue3不用this)的文章就介紹到這了,更多相關vue3使用vue-i18n內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • Vue中使用fetch讀取本地txt文件的技術實現(xiàn)

    Vue中使用fetch讀取本地txt文件的技術實現(xiàn)

    在Vue.js應用開發(fā)中,有時我們需要從本地讀取文本文件（如 .txt 文件）并將其內容展示在頁面上,這種需求在處理配置文件、日志文件或靜態(tài)數據時非常常見,本文將詳細介紹如何在Vue中使用 fetch API 讀取本地 .txt 文件,并提供多個示例和使用技巧
    2024-10-10
  • Vue基于Element-ui實現(xiàn)表格彈窗組件

    Vue基于Element-ui實現(xiàn)表格彈窗組件

    這篇文章主要為大家詳細介紹了Vue基于Element-ui實現(xiàn)表格彈窗組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue2過濾器模糊查詢方法

    vue2過濾器模糊查詢方法

    今天小編就為大家分享一篇vue2過濾器模糊查詢方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue版本vue2.9.6升級到vue3.0的詳細步驟

    Vue版本vue2.9.6升級到vue3.0的詳細步驟

    vue版本升級相信大家應該都遇到過,下面這篇文章主要給大家介紹了關于Vue版本vue2.9.6升級到vue3.0的詳細步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-09-09
  • Vue極簡生成器?Vuepress的實現(xiàn)

    Vue極簡生成器?Vuepress的實現(xiàn)

    本文主要介紹了Vue極簡生成器?Vuepress的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧<BR>
    2022-06-06
  • 利用Vue實現(xiàn)簡易播放器的完整代碼

    利用Vue實現(xiàn)簡易播放器的完整代碼

    這篇文章主要給大家介紹了關于如何利用Vue實現(xiàn)簡易播放器的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • 解決vue處理axios post請求傳參的問題

    解決vue處理axios post請求傳參的問題

    下面小編就為大家分享一篇解決vue處理axios post請求傳參的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue?element表格某一列內容過多,超出省略號顯示的實現(xiàn)

    vue?element表格某一列內容過多,超出省略號顯示的實現(xiàn)

    這篇文章主要介紹了vue?element表格某一列內容過多,超出省略號顯示的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-01-01
  • 關于vue表單提交防雙/多擊的例子

    關于vue表單提交防雙/多擊的例子

    今天小編就為大家分享一篇關于vue表單提交防雙/多擊的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • 一文教會你如何在npm上傳自己的包

    一文教會你如何在npm上傳自己的包

    作為一個前端開發(fā)者,我們要學會自己編寫一些開發(fā)工具模塊,也可以自己編寫一些組件,甚至可以通過自己的能力編寫一個框架出來,這都需要我們能夠靈活的管理我們的包,下面這篇文章主要給大家介紹了關于如何通過一文教會你在npm上傳自己的包的相關資料,需要的朋友可以參考下
    2023-03-03

最新評論