Probleme bei der Verwendung von VueI18n-Außenkomponenten in Vue3.0

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

Must be called at the top of a `setup`

Dies bedeutet, dass es im Setup geschrieben werden muss.

Um i18n mit der Kompositions-API von Vue 3, aber außerhalb des setup() der Komponente, zu verwenden, müssen Sie wie folgt 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 der Schlüsselwortlaut


//某个组合式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;

Guess you like

Origin blog.csdn.net/mrhaoxiaojun/article/details/125267804