Apakah keadaan apabila Vue3.0 menggunakan VueI18n di luar komponen?

vue3.0 menggunakan VueI18n di luar komponen

Biasanya menulis kod yang ditulis dalam persediaan di luar akan mengakibatkan ralat

Mesti dipanggil di bahagian atas `persediaan`

Ini bermakna ia mesti ditulis dalam persediaan

Untuk menggunakan i18n dengan API komposisi Vue 3, tetapi dalam komponen Selain setup(), anda perlu menulis seperti ini

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

Berikut ialah kaedah penulisan utama

//某个组合式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 menggunakan pengantarabangsaan vue-i18n (penukaran berbilang bahasa)

Peringatan: vue3 perlu digunakan vue-i18n mestilah versi 9 atau lebih tinggi npm install vue-i18n@9.2.2

Operasi khusus

Buat folder bahasa baharu di bawah fail src, dan bina "cn.js" di dalamnya ", "en.js", dan "index.js" tiga fail

cn.js dan en.js menyimpan terjemahan yang sepadan, contohnya:

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 menyimpan Templat

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

berikut dan kemudian gunakan 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)

dalam main.js apabila menggunakannya, anda hanya perlu menulis {{ $t("home .title") }} di tempat yang sepadan untuk menggunakannya. , anda perlu memberi perhatian khusus kepada fakta bahawa ia mesti bermula dengan $t, dan anda tidak boleh menggunakan t sahaja. Jika anda perlu menggunakan t sahaja, anda memerlukan yang lain konfigurasi adalah lebih mudah untuk menggunakan $t secara langsung

Atas ialah kandungan terperinci Apakah keadaan apabila Vue3.0 menggunakan VueI18n di luar komponen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!