Vue3.0 がコンポーネント外で VueI18n を使用する場合はどうなりますか?

#vue3.0 はコンポーネントの外部で VueI18n を使用します

通常、セットアップで記述されたコードが外部で記述されるとエラーが報告されます

`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

特定の操作

src ファイルを作成し、その中に「cn.js」をビルドします。「、en.js」、「index.js」の 3 つのファイル

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 には以下の Template

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 を使用する場合はどうなりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。