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

Vue3.0在組件外使用VueI18n的情況

 更新時(shí)間:2023年04月19日 09:03:36   作者:mrhaoxiaojun  
這篇文章主要介紹了Vue3.0在組件外使用VueI18n的情況,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3.0在組件外使用VueI18n

通常將寫在setup里面的代碼寫在外面會(huì)報(bào)錯(cuò)

Must be called at the top of a `setup`

意思是必須寫在setup里面

要將 i18n 與 Vue 3 的組合 API 一起使用,但在組件的 setup() 之外,需要這么寫

// locales/setupI18n.ts

import { App } from 'vue';
import { createI18n } from 'vue-i18n'; // 引入vue-i18n組件
import { messages } from './config';
import globalConfig from '@/config/index';

const {
? setting: { lang: defaultLang },
} = globalConfig;

// 注冊i8n實(shí)例并引入語言文件
const localeData = {
? legacy: false, // 使用CompotitionAPI必須添加這條.
? locale: defaultLang,
? messages,
? globalInjection: true,
};

export const i18n = createI18n(localeData);

// setup i18n instance with glob
export const setupI18n = {
? install(app: App) {
? ? app.use(i18n);
? },
};

這里是關(guān)鍵寫法

//某個(gè)組合式j(luò)s文件

//報(bào)錯(cuò)寫法 Uncaught SyntaxError: Must be called at the top of a `setup`?
//import { useI18n } from 'vue-i18n'
//const { t } = useI18n()?

//正確寫法
import { i18n } from '@/locales/setupI18n';
const { t } = i18n.global;

vue3使用vue-i18n國際化(多語言轉(zhuǎn)換)

提醒:vue3要使用vue-i18n必須要9以上的版本   npm install vue-i18n@9.2.2

具體操作

在src文件下新建一個(gè)lang文件夾,里面分別建好“cn.js”、“en.js”、 “index.js”三個(gè)文件

cn.js和en.js中存放對應(yīng)的翻譯,例如:

const messages = {
? home: {
? ? title: 'Book Store',
? ? hint: 'Computer Science And Software Engineering',
? ? guessYouLike: 'Guess You Like',
? }
}
?
export default messages
const messages = {
? home: {
? ? title: '書城',
? ? hint: '計(jì)算機(jī)科學(xué)和軟件工程',
? ? guessYouLike: '猜你喜歡'
? }
}
?
export default messages

index.js中存放如下模板

import { createI18n } from 'vue-i18n'
import en from './en'
import cn from './cn'
?
const messages = {
? en, cn
}
?
?
const localeData = {
? legacy: false, // composition API
? globalInjection: true, //全局生效$t
? locale: cn, // 默認(rèn)cn翻譯
? messages
}
?
export function setupI18n (app) {
? const i18n = createI18n(localeData)
? app.use(i18n)
}

然后在main.js中使用setupI18n

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { setupI18n } from './lang/index'
?
const app = createApp(App)
app.use(store).use(router).mount('#app')
?
setupI18n(app)

使用的時(shí)候只需要在對應(yīng)的地方寫上 {{ $t("home.title") }} 就能使用了,需要特別注意的是必須使用$t開頭,不能單獨(dú)用t,如果需要單獨(dú)用t的話需要其他的配置,直接用$t也比較方便,關(guān)于怎么單獨(dú)使用t這里就不細(xì)說了

<span class="ebook-popup-title-text">
? ? {{$t("home.title")}}
</span>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue按需引入element Transfer 穿梭框

    vue按需引入element Transfer 穿梭框

    這篇文章主要介紹了vue按需引入element Transfer 穿梭框的相關(guān)資料,需要的朋友可以參考下
    2017-09-09
  • vue中checkbox如何修改為圓形樣式

    vue中checkbox如何修改為圓形樣式

    這篇文章主要介紹了vue中checkbox如何修改為圓形樣式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • Vue3源碼分析組件掛載初始化props與slots

    Vue3源碼分析組件掛載初始化props與slots

    這篇文章主要為大家介紹了Vue3源碼分析組件掛載初始化props與slots實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • vue路由傳參三種基本方式詳解

    vue路由傳參三種基本方式詳解

    這篇文章主要介紹了vue路由傳參三種基本方式詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-12-12
  • vue3中7種路由守衛(wèi)的使用大全舉例

    vue3中7種路由守衛(wèi)的使用大全舉例

    最近在學(xué)習(xí)vue,感覺路由守衛(wèi)這個(gè)地方知識(shí)點(diǎn)挺多的,而且很重要,下面這篇文章主要給大家介紹了關(guān)于vue3中7種路由守衛(wèi)的使用大全,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03
  • Vue Router路由守衛(wèi)超詳細(xì)介紹

    Vue Router路由守衛(wèi)超詳細(xì)介紹

    路由守衛(wèi),簡單理解來說就是,當(dāng)用戶要進(jìn)行一些操作時(shí),我需要用戶的一些信息或數(shù)據(jù)或行為,我判斷過后,才會(huì)同意用戶進(jìn)行操作,說到這里,我想大家心里都或多或少有點(diǎn)理解了吧
    2023-01-01
  • Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請求的操作

    Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請求的操作

    這篇文章主要介紹了Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請求的操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue項(xiàng)目打包發(fā)布上線的方法步驟

    vue項(xiàng)目打包發(fā)布上線的方法步驟

    本文主要介紹了vue項(xiàng)目打包發(fā)布上線的方法步驟,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • Vue出現(xiàn)彈出層時(shí)禁止底部頁面跟隨滑動(dòng)

    Vue出現(xiàn)彈出層時(shí)禁止底部頁面跟隨滑動(dòng)

    本文主要介紹了Vue出現(xiàn)彈出層時(shí)禁止底部頁面跟隨滑動(dòng),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • vue使用微信掃一掃功能的實(shí)現(xiàn)代碼

    vue使用微信掃一掃功能的實(shí)現(xiàn)代碼

    這篇文章主要介紹了vue使用微信掃一掃功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2020-04-04

最新評論