vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
2023-09-14 08:59:32 时间
一,安装i18n的第三方库:
liuhongdi@lhdpc:/data/vue/admweb$ npm install vue-i18n@next --save npm http fetch GET 200 https://registry.npm.taobao.org/vue-i18n 837ms (cache revalidated) npm http fetch GET 200 https://registry.npm.taobao.org/vue 76ms (cache revalidated) npm http fetch POST 404 https://registry.npm.taobao.org/-/npm/v1/security/advisories/bulk 465ms npm http fetch POST 404 https://registry.npm.taobao.org/-/npm/v1/security/audits/quick 453ms up to date in 4s 72 packages are looking for funding run `npm fund` for details
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,创建i18n专用的目录和文件
在src下创建目录:
language
目录下创建三个js文件,
分别是:
ch.js
en.js
index.js
代码:
ch.js
module.exports = { menus: { Home: '首页', Goods: '商品', User: '用户', System: '系统', }, }
en.js
module.exports = { menus: { Home: 'Home', Goods: 'Goods', User: 'User', System: 'System', }, }
index.js
//引入vue-i18n import { createI18n } from 'vue-i18n' //注册i8n实例并引入语言文件 const i18n = createI18n({ //locale: 'ch', //默认显示的语言 locale:localStorage.getItem('lang') || 'ch', messages: { //引入两个语言文件 ch:require('./ch.js'), en:require('./en.js') } }) //export export default i18n;
三,main.js引用i18n
import i18n from './language/index' ... //启动app const app = createApp(App) app.use(ElementPlus,{locale}) app.use(store) app.use(router) app.use(i18n) app.mount('#app')
四,在页面中引用和在代码中引用:
GoodsList.vue
<template> <div class="hello" style="background: #00ff00;"> <h1>这是: 商品列表</h1> {{$t('menus.Home') }} </div> </template> <script> export default { name: 'Home', } </script>
五,语言的切换:
页面:
<el-dropdown style="margin-right: 15px;"> <span style="height:40px;display: flex;align-items: center;justify-content:center;"> <span class="nicknameclass" style="margin-left: 5px"> {{langName}} </span> <i class="el-icon-arrow-down theme-icon-color"></i> </span> <template #dropdown > <el-dropdown-menu> <el-dropdown-item icon="el-icon-s-custom" @click="setLanguage('ch')">中文</el-dropdown-item> <el-dropdown-item icon="el-icon-table-lamp" @click="setLanguage('en')">English</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown>
js:
import { useI18n } from 'vue-i18n'
...
setup() { const { locale } = useI18n(); const langName = ref(''); const setLanguage = (lang) => { locale.value = lang; localStorage.setItem('lang', lang); ElMessage.success('语言切换成功'); location.reload(); }; function getLangName(lang) { if (lang == 'ch') { return '中文'; } else if (lang == 'en') { return 'English'; } } onMounted(()=>{ langName.value = getLangName(locale.value); }); return { setLanguage, langName, }; },
六,效果演示:
切换为英文时
切换为中文时
七,查看版本
查看vue-i18n的版本
liuhongdi@lhdpc:/data/vue/admweb$ npm list vue-i18n admweb@0.1.0 /data/vue/admweb └── vue-i18n@9.2.0-beta.7
查看vue的版本
liuhongdi@lhdpc:/data/vue/admweb$ npm list vue@ admweb@0.1.0 /data/vue/admweb ├─┬ @vue/cli-plugin-babel@4.5.9 │ └─┬ @vue/babel-preset-app@4.5.9 │ └── vue@3.0.5 deduped ├─┬ @vue/compiler-sfc@3.0.5 │ └── vue@3.0.5 deduped ├─┬ element-plus@1.0.1-beta.20 │ └── vue@3.0.5 deduped ├─┬ vue-i18n@9.2.0-beta.7 │ └── vue@3.0.5 deduped ├─┬ vue-router@4.0.2 │ └── vue@3.0.5 deduped ├── vue@3.0.5 ├─┬ vue3-count-to@1.0.10 │ └── vue@3.0.5 deduped └─┬ vuex@4.0.0 └── vue@3.0.5 deduped
相关文章
- Vue.js 开发实践:实现精巧的无限加载与分页功能
- JS框架_(JQuery.js)模拟刮奖
- JS框架_(Vue.js)带有星期日期的数字时钟
- JS框架_(AJAX)检测ip和地区
- JS - 解决引入 js 文件无效的问题
- Node.js进程管理之子进程
- [Vue] Use Vue.js Watchers to Respond to Async Updates
- [Vue] Create Vue.js Layout and Navigation with Nuxt.js
- JS获取select标签的选中值和清空select值的操作
- vue.js开发SPA常见问题及解决方法
- C#后台执行js
- Vue.js——60分钟快速入门
- vue.js3: 使用js-md5 (js-md5@0.7.3 / vue@3.2.26)
- vue.js 3.2.20: 用photoswipe实现图片的浏览:增加切换动画和自动播放(photoswipe@4.1.3)
- vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
- Google Pagespeed,自动压缩优化JS/CSS/Image
- Atitit mybatis的扩展使用sql udf,js java等语言 目录 1.1. 默认,mybatis使用xml,sql等语言来书写业务流程1 2. 使用ognl调用java函数1 3
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue项目JS播放音频音效和背景音乐
- JS设置cookie,删除cookie(引)
- Vue: vue-router路由