Vue3.0이 구성 요소 외부에서 VueI18n을 사용하는 경우 상황은 무엇입니까?

vue3.0은 컴포넌트 외부에서 VueI18n을 사용합니다

보통 setup에 작성한 코드를 외부에 쓰면 에러가 발생합니다

`setup` 상단에서 호출해야 합니다

의미 setup에서 작성해야 하는데, Vue 3의 통합 API와 함께 i18n을 사용해야 하는데, 컴포넌트의 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

특정 작업

아래에 새 lang 폴더를 만듭니다. src 파일을 만들고 그 안에 "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를 직접 사용하는 것이 더 편리합니다. 혼자쓰지마

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

위 내용은 Vue3.0이 구성 요소 외부에서 VueI18n을 사용하는 경우 상황은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!