Vue3 使用vue-i18n
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
1. 安装i18n依赖
npm install vue-i18n
或
yarn add vue-i18n
2. 新建文件引入i18n,初始化实例并且在main文件中使用
import { createI18n } from 'vue-i18n'
// 语言包文件
import zhLocal from "./package/zh";
import enLocal from "./package/en";
// 导入语言文件
const messages = {
zh: { ...zhLocal },
en: { ...enLocal }
}
export let i18n;
// 提供install方法,给vue.use进行创建实例
export const setupI18n = {
install(app) {
const langStore = useLangStroe()
i18n = createI18n({
globalInjection: true, //如果设置true, $t() 函数将注册到全局
legacy: false, //如果想在composition api中使用需要设置为false,
locale: langStore.lang === 'zh-CN' ? 'zh' : langStore.lang,
fallbackLocale: 'en',
messages // set locale messages
})
app.use(i18n)
}
}
main.ts文件中引入
import { setupI18n } from '@/lang'
const app = createApp(App)
app.use(setupI18n)
app.mount('#app')
3. 使用方法
- 在vue模板中直接使用,例如{{ $t('') }}
- 在<script setup lang='ts'>中使用
import { useI18n } from 'vue-i18n'; const { t } = useI18n(); t('name')
4. 切换语言
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
locale.value = 'en'
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)