vue3 + i18n

安装

npm install vue-i18n

yarn add vue-i18n

main.js

如果在一个模块系统中使用它，你必须通过 Vue.use() 明确地安装 vue-i18n：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'
import i18n  from './lang/i18n'const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(i18n)
app.mount('#app')

在src目录下创建lang文件夹，下包含ch.js(中文包) en.js(英文包) index.js i18n.js(配置i18n)

ch.js

export default{message: {username: '用户名',password: '密码',login: '登录',captcha: '验证码',forgetPassword: '忘记密码？',loginTip: '当前登录结果随机。验证码随便填',editpassword: '修改密码',logout: '退出登录',errMsg: {inputRequired: '请输入{cont}',selectRequired: '请选择{cont}'  }},
}

en.js

export default{message: {username: 'User Name',password: 'Password',login: 'Login',captcha: 'Captcha',forgetPassword: 'Forget Password?',loginTip: 'The login result is random. Just fill in the captcha',editpassword: 'Edit Password',logout: 'Logout',errMsg: {inputRequired: 'Please Input {cont}',selectRequired: 'Please Select {cont}'}},
}

index.js

import ch from './ch'
import en from './en'export default {ch,en
}; //将i18n暴露出去，在main.js中引入挂载

i18n.js

import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import messages from './index'
const language = ((navigator.language ? navigator.language : navigator.userLanguage) || "ch"
).toLowerCase();
const i18n = createI18n({fallbackLocale: 'ch',//预设语言环境globalInjection:true,legacy: false, // you must specify 'legacy: false' optionlocale: language.split("-")[0] || "ch",//默认显示的语言 messages,//本地化的语言环境信息。
});export default i18n

使用

{{ $t(`message.login`) }}

封装组件加入点击事件（js环境，不是typeScript环境）

配置element Plus

<template><div><el-dropdown><template #dropdown><el-dropdown-menu><el-dropdown-itemv-for="item in languages ":key="item.value":disabled="languages === item.value"><span @click="handSeletlanguages">{{item.name}}</span></el-dropdown-item></el-dropdown-menu></template></el-dropdown></div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import $store from '../../store/index'
import { ElMessage } from 'element-plus'
export default defineComponent({setup() {const { locale } = useI18n()console.log('locale' , locale)const state = reactive({languages: [{name: 'en',value: 'en'},{name: '中文',value: 'ch'}],handSeletlanguages: (lang) => {locale.value = lang$store.dispatch("setLang", lang)ElMessage({message: 'Switch Language Success',type: 'success'})}})const languages = computed(() => {return $store.state.languages})return {...toRefs(state),languages}}
})
</script>

store.js

import { createStore } from 'vuex'export default createStore({state: {language: ''},mutations: {setLang(state, language) {state.language = language}},actions: {setLang(context, value) {context.commit('setLang', value)}}
})

使用封装组件

<template><div class="login-context"><div class="title-container">{{ $t(`message.login`) }}<langSelect></langSelect></div></div>
</template>
<script >
import { reactive, toRefs, defineComponent } from 'vue'
import langSelect from '../../components/lang/index.vue'export default defineComponent({components: {langSelect},
})
</script>

vue3 + i18n相关推荐

Vue3+i18n多语言动态国际化设置步骤
1.技术介绍 i18n:Vue.js 的国际化插件.它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中 i18n的官网地址安装 | Vue I18n (kazupon.github.io ...
pako 压缩lottie动效资源方案
原文链接: pako 压缩lottie动效资源方案上一篇: typescript-json-schema 和 ajv 检测数据是否符合指定的ts类型下一篇: vue3 i18n 国际化支持基本思 ...
vue3.0 引入i18n 做国际化 - 做动态语言切换
说明适合 vue2.0版本的官方链接如下: Vue I18nVue I18n 是 Vue.js 的国际化插件https://kazupon.github.io/vue-i18n/zh/ ...
vue3.x使用i18n和i18n Ally自动化翻译
以下为vue3.x 使用i18n和i18n Ally自动化翻译的步骤, vue2.x配置i18n步骤>> vue 版本> 3.0.0 vue/cli 版本 4.5.13 vue-i1 ...
vue3玩转i18n
交流QQ群:555913397 有什么问题可以加群大家一起交流 1.安装i18n yarn add vue-i18n 2.配置i18n 目录结构 index.ts i18n配置文件 import ty ...
vite+vue3+ts使用i18n
vue3使用i18n必须使用9.*版本 "vue-i18n": "^9.2.2" 目录 1.下载使用 1.1.创建配置 1.2.基本使用 1.3.这时会有一个警 ...
推荐 10 个好用的 Vue3 的开源项目，开发效率又能提升了！
大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫又在线营业啦. 平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目如果不想错过精彩内 ...
cli3解决 ie11语法错误 vue_【VUE3.0】它来了，2020年09月18日，Vue.js 3.0 正式发布，但是........
您曾见过凌晨的苹果发布会,那前端界的发布会你见过吗? 在Vue3正式发布前,Vue的作者尤雨溪发表主题演讲. 注意! 注意! 注意! 发布会中表示不建议大家立刻升级到Vue3.0版本,之前项目中某些依 ...
2、Gantt 入门（vue3 + ts）
首先把 gantt 官网下载的相关文件放入 resource 文件中. 下载地址:https://dhtmlx.com/docs/products/dhtmlxGantt/download.shtml ...

vue3 + i18n

vue3 + i18n相关推荐

最新文章

热门文章