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 messagesindex.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)文章
這篇文章主要為大家詳細(xì)介紹了基于VUE選擇上傳圖片并頁面顯示，圖片可以刪除的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要給大家介紹了關(guān)于Uniapp設(shè)置頁面的背景圖片,uni-app中設(shè)置背景圖有兩種方式,分別是全局設(shè)置和在相應(yīng)的view內(nèi)設(shè)置背景,文中給出了代碼示例,需要的朋友可以參考下2024-03-03
Vue2.x中的父子組件相互通信的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue2.x中的父子組件相互通信,需要的朋友可以參考下2017-05-05
深入分析element ScrollBar滾動(dòng)組件源碼
這篇文章主要介紹了element ScrollBar滾動(dòng)組件源碼深入分析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細(xì)介紹了Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
通過配置多頁面應(yīng)用，從而將給子模塊依賴分隔開各自加載，可以減少初始資源的請求，加快頁面的訪問速度，這篇文章主要介紹了vue3+vite配置多頁面的詳細(xì)過程,需要的朋友可以參考下2023-06-06
Vue 頁面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼
這篇文章主要介紹了Vue 頁面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue3組件化開發(fā)常用API知識(shí)點(diǎn)總結(jié)
Vue是目前Web前端最流行的開發(fā)框架技術(shù),?下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)常用API的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue的特點(diǎn)之一是組件化開發(fā)，那么問題來了，組件中的數(shù)據(jù)和方法都是獨(dú)立的，我們?nèi)绾芜M(jìn)行組件之間的交互呢。這個(gè)時(shí)候就要用到組件傳參了2022-07-07
Vue技巧Element Table二次封裝實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue技巧Element Table二次封裝實(shí)戰(zhàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11