i18n 在 Vue3 项目中用于实现应用的国际化,即支持多语言和地区设置。Vue I18n 是 Vue.js 的国际化插件,它允许你在 Vue.js 应用中轻松实现国际化。 要在Vue3 项目中实现 i18n,你需要安装 vue-i18n 插件,并配置你的翻译资源。 bash # 安装 vue-i18n npm install vue-i18n@next 4. Vue3、TypeScript 和...
1、下载 依赖 npm install vue-i18n@nex 2、在src目录下创建文件夹 创建文件 index.ts 、 zh/index.ts 、en/index.ts // index.ts import { createI18n } from 'vue-i18n' import zh from './zh/index' import en from './en/index' const messages = { en, zh, } console.log('localStorage.g...
npm install vue-i18n # 如果发生Conflicting peer dependency,则npm install vue-i18n --legacy-peer-deps 2 创建文件lang 包括文件index.ts、zh.ts其他语言ts可自行创建 index.ts import { createI18n } from 'vue-i18n' import zh from './zh' const i18n = createI18n({ allowComposition: true, ...
vue3使用i18n实现国际化 安装vue-i18n npm install vue-i18n 创建一个ts文件用于存储各种翻译 image.png globalLang.ts的内容如下: exportdefault{"cn":{},"en":{},"de":{},"es":{},"fr":{},"id":{},"it":{},"jp":{},"kr":{},"pt":{},"tw":{}}; 在main.ts中全局引入 importAppfr...
当时做这个官网是想练手 Vue3 的,这里也是 Vue3 + i18n 的结合使用。 1、安装 npm install vue-i18n 2、创建语言文件和目录结构 a、在 src 下创建 locales 目录 b、在 locales 下创建语言配置文件:zh-cn.ts 和 en.ts c、在 locales 下创建 index.ts 文件 ...
3.路径绑定 接下来,我们需要定义使用 URL 作为当前语言,编辑router/index.ts: import { createRouter as _createRouter, type RouteLocationNormalized } from 'vue-i18n-routing'; import { createWebHistory } from 'vue-router'; import HomeView from '@/views/HomeView.vue'; ...
在vue模板中使用 <template>{{ $t('return') }}</template>import { defineComponent } from "vue"; import { useI18n } from 'vue-i18n' export default defineComponent({ name: 'Forget', setup() { const i18n = useI18n() const tips = i18n.t('return') } }) 在外部的ts文件中使用 import ...
3. 4. 5. 6. 7. 在同样的locales文件夹下,我们还可以创建其他语言的翻译文件,比如zh.json作为中文语言的翻译文件。 第三步:创建i18n插件 现在,我们需要创建一个Vue插件来管理我们的国际化功能。在src目录下创建一个plugins文件夹,并在其中创建一个i18n.ts文件,作为i18n插件的入口文件。
Vue3 + TS + VueI18n(9.2.0)国际化时,在<script setup>中直接使用t('Common.pleaseChoose')时,发现值为空串的问题
在你的主入口文件中(通常是src/main.ts),引入并使用 i18n: src/main.ts import{createApp}from'vue';importAppfrom'./App.vue';importi18nfrom'./i18n';constapp=createApp(App);app.use(i18n);app.mount('#app'); 步骤5:在组件中使用 i18n ...