Wie ist die Situation, wenn Vue3.0 VueI18n außerhalb der Komponente verwendet?

vue3.0 verwendet VueI18n außerhalb der Komponente

Wenn der im Setup geschriebene Code außerhalb geschrieben wird, wird normalerweise ein Fehler gemeldet

Muss am Anfang eines „Setups“ aufgerufen werden

Bedeutung Es muss geschrieben werden. Im Setup müssen Sie i18n mit der kombinierten API von Vue 3 verwenden, aber außerhalb des setup() der Komponente müssen Sie so schreiben:

// 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);
  },
};

Hier ist die wichtigste Schreibmethode, die

//某个组合式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 verwendet vue-i18n Internationalisierung (mehrsprachige Konvertierung)

Erinnerung: Um vue-i18n in vue3 verwenden zu können, müssen Sie Version 9 oder höher haben. npm install vue-i18n@9.2.2

Spezifische Vorgänge

Erstellen Sie einen neuen Lang-Ordner unter der src-Datei und bauen Sie darin „cn.js“ auf. „, „en.js“ und „index.js“ speichern die drei Dateien

cn.js und en.js die entsprechenden Übersetzungen, zum Beispiel:

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 speichert die folgende Vorlage

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)
}

und dann in main. Wenn Sie 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)

in js verwenden, müssen Sie nur {{ $t("home.title") }} an die entsprechende Stelle schreiben Beachten Sie, dass es mit $t beginnen muss und nicht alleine verwendet werden kann. Wenn Sie t alleine verwenden müssen, ist es bequemer, $t direkt zu verwenden um es alleine zu verwenden

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

Das obige ist der detaillierte Inhalt vonWie ist die Situation, wenn Vue3.0 VueI18n außerhalb der Komponente verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!