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

本篇內容主要講解“Vue3.0在組件外使用VueI18n的情況是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue3.0在組件外使用VueI18n的情況是什么”吧!

vue3.0在組件外使用VueI18n

通常將寫在setup里面的代碼寫在外面會報錯

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實例并引入語言文件
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);
  },
};

這里是關鍵寫法

//某個組合式js文件

//報錯寫法 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國際化（多語言轉換）

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

具體操作

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

cn.js和en.js中存放對應的翻譯，例如：

const messages = {
  home: {
    title: 'Book Store',
    hint: 'Computer Science And Software Engineering',
    guessYouLike: 'Guess You Like',
  }
}
 
export default messages
const messages = {
  home: {
    title: '書城',
    hint: '計算機科學和軟件工程',
    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, // 默認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)

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

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

到此，相信大家對“Vue3.0在組件外使用VueI18n的情況是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！