Problèmes liés à l'utilisation des composants externes de VueI18n dans Vue3.0

Habituellement, si le code écrit dans la configuration est écrit à l'extérieur, une erreur sera signalée.

Must be called at the top of a `setup`

Cela signifie qu'il doit être écrit dans la configuration.

Pour utiliser i18n avec l'API de composition de Vue 3, mais en dehors du setup() du composant, vous devez écrire comme ceci

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

Voici la clé de l'écriture


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

Je suppose que tu aimes

Origine blog.csdn.net/mrhaoxiaojun/article/details/125267804
conseillé
Classement