// 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;

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

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

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)

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