在vue3+ts中配置全局vue-i18n
warning:
这篇文章距离上次修改已过191天,其中的内容可能已经有所变动。
在Vue 3 + TypeScript 项目中配置全局vue-i18n,你需要按照以下步骤操作:
- 安装vue-i18n:
npm install vue-i18n@next
- 在项目中创建一个i18n配置文件,例如
i18n.ts
:
import { createI18n } from 'vue-i18n';
const messages = {
en: {
message: {
hello: 'hello'
}
},
fr: {
message: {
hello: 'bonjour'
}
}
};
const i18n = createI18n({
locale: 'en', // set default locale
fallbackLocale: 'en', // set fallback locale
messages, // set locale messages
});
export default i18n;
- 在你的main.ts文件中引入并配置全局i18n实例:
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n'; // 引入i18n配置
const app = createApp(App);
app.use(i18n);
app.mount('#app');
现在你已经在Vue 3 + TypeScript项目中配置了全局的vue-i18n,可以在任何组件中使用$t
函数来访问本地化消息。
评论已关闭