Vue3.0在組件外使用VueI18n的情況
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; // 注冊(cè)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中存放對(duì)應(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í)候只需要在對(duì)應(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 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請(qǐng)求的操作
這篇文章主要介紹了Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請(qǐng)求的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue出現(xiàn)彈出層時(shí)禁止底部頁面跟隨滑動(dòng)
本文主要介紹了Vue出現(xiàn)彈出層時(shí)禁止底部頁面跟隨滑動(dòng),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07