Vue项目实战05:18n实现多语言自动切换-浏览器语言设置
什么是vue-i18n
i18n是 Internationalization 这个英文的简写,即国际化的意思,vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换,以适应不同地区用户的需求。
安装vue-i18n
直接在项目中执行安装命令:npm install vue-i18n --save
全局引入vue-i18n
在项目中引入vue-i18n,实例化vue-i18n将需要加载的语言包通过require导入,这里看个人需求我只需要中英日文,所以引入zh-CN.js和en-US.js ja-JP.js,分别对应中文和英文 日文,你也可以提供多语言包,最后别忘记了将实例挂载至Vue。
步骤
1.在src下新建locale文件夹
在locale下建lang文件夹----用来存放自己设置的多语言文件
index.js 入口文件
index.js里放置内容如下
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { localRead } from '@/libs/util'
import { Locale } from 'vant'
import customZhCn from './lang/zh-CN'
import customJaJp from './lang/ja-JP'
import customEnUs from './lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'
import enUS from 'vant/lib/locale/lang/en-US'
import jaJP from 'vant/lib/locale/lang/ja-JP'Vue.use(VueI18n)// 自动根据浏览器系统语言设置语言
const navLang = navigator.language.substring(0, 2)
const localLang = navLang || false
let lang = localLang || localRead('local') || 'zh'Vue.config.lang = langVue.locale = () => {}
const messages = {'zh': Object.assign(zhCN, customZhCn),'en': Object.assign(enUS, customEnUs),'ja': Object.assign(jaJP, customJaJp)
}
// 实例化i18n并引入语言文件。
const i18n = new VueI18n({locale: lang, // 语言标识 // 默认语言messages
})const vantLocales = lang => {if (lang === 'zh') {Locale.use(lang, zhCN)} else if (lang === 'en') {Locale.use(lang, enUS)} else if (lang === 'ja') {Locale.use(lang, jaJP)}
}
vantLocales(i18n.locale)export default i18n
import { localRead } from '@/libs/util'
由来
export const localSave = (key, value) => {localStorage.setItem(key, value)
}export const localRead = (key) => {return localStorage.getItem(key) || ''
}
在main.js里引入 并挂载
import i18n from '@/locale'Vue.use(i18n)new Vue({router,i18n, // 挂载render: h => h(App)
}).$mount('#app')
定义语言包
语言包已json格式书写,数据以键值对的形式呈现,所以每个语言包的键都是对应的,只是值不想同,为避免编码问题问题,我们键统一用英文,所以创建语言包的时候我们先从英文开始,搞定之后直接复制再修改对应的值就好了,最后记得export导出对象。定义数据的形式可以根据个人需求来,我喜欢把相同的放一起,这样找起来方便点。如果你觉得每次都要通过lang来获取数据比较麻烦,我们可以再优化下,把export const lang=改写成module.exports= 模式,这样就可以直接获取对象中的对象了。
页面渲染
静态渲染时,用双大括号包裹,把数据当成变量引入,$t
用来调用语言包中键对应的值。如果用的是element-ui动态绑定值,双引号即可。动态渲染时,我们可以借助计算属性,再拿这个计算属性去遍历DOM元素即可。
//动态渲染
computed:{navlist(){return this.$t('nav')}
}
以上是根据浏览器自动切换语言
点击切换
//手动切换语言
change(){if (this.$i18n.locale === 'zh-CN') {this.$i18n.locale = 'en-US';localStorage.setItem('lang','en-US') }else {this.$i18n.locale = 'zh-CN';localStorage.setItem('lang','zh-CN')}
},
可以参考这篇文章 https://www.shangyouw.cn/shezhi/arc59448.html
Vue项目实战05:18n实现多语言自动切换-浏览器语言设置相关推荐
- 根据浏览器语言自动切换多语言站点 Star.hou
<script type="text/javascript">var url;var lang = (navigator.appName=='Netscape'?nav ...
- 【VUE项目实战】59、订单的物流信息查询功能
接上篇<58.订单修改收货地址的功能> 上一篇我们完成了订单列表的修改收货地址功能,本篇我们来实现订单的物流信息查询功能. 一.要实现的效果 我们要实现点击操作列的"物流进度&q ...
- vue 动态添加class_前端开发:Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容 项目环境搭建 路由导航实现 ListVie ...
- vue 将字符串最后一个字符给替换_前端开发:Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容 项目环境搭建 路由导航实现 ListVie ...
- 【VUE项目实战】68、使用pm2管理项目
接上篇<67.上线-开启gzip和配置HTTPS服务> 上一篇我们学习了如何开启gzip配置来减少文件访问体积,并配置HTTPS服务.本篇我们讲解一下如何使用pm2管理项目. 本篇是该系列 ...
- Vue项目实战 —— 后台管理系统( pc端 )
前期回顾 我只写注释 -- 让Ai写代码_的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_的博客-CSDN博客https://blog.csdn.net/m0_57 ...
- 【VUE项目实战】32、权限管理-实现角色列表
接上篇<31.权限管理-实现权限列表> 上个阶段我们完成了权限管理模块,本篇我们来介绍用户.角色和权限三者的关系,并完成角色管理列表模块. 一.权限管理业务分析 通过权限管理模块,控制不同 ...
- 【VUE项目实战】64、CND优化ElementUI以及首页内容定制
接上篇<63.指定打包入口及加载外部CDN资源> 上一篇我们为开发模式与发布模式制定不同的打包入口,然后为项目加载外部CDN资源.本篇我们来学习通过CND优化ElementUI的打包,以及 ...
- Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
目录 前言完 效果图 : 登录含签权 注册带正则 个人中心 下拉加载更多主页 修改个人中心 视频播放加关注+收藏 评论盖楼A回复B B回复C C回复A类似 项目开始 封装登录.注册 封装登录 从零到一 ...
- Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
前期回顾 30秒学会 -- <获取验证码基本操作>_0.活在风浪里的博客-CSDN博客前期回顾 懒人必备 -- 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用, ...
最新文章
- 深度学习常用数据集介绍
- python求1+2+3+....+100的和注意事项_python006(求1-2+3-4+5.....99的所有数的和)
- 转:centos8开启防火墙端口
- Sublime Text 3
- 面试官:我们只想要这样的C++工程师
- Linux的useradd
- DBCacheServer升级
- 一文看尽中亦科技EVO-ITSM 3.0新品发布会
- 小任务之使用SVG画柱状图~
- mysql启动命令 linux命令,linux下mysql 启动命令
- linux开发板通过网线连接电脑
- 华为RS1 企业的网络架构
- 用scratch制作蓄力跳
- 做个什么网站可以赚钱,这6种网站最好赚钱!
- 开发微信小程序所需要的http服务器搭建
- 做一个可以赚钱的英文网站
- 用“大数据”预防职务犯罪
- 组合博弈游戏 - SG函数和SG定理
- python字典进行大写转化_python 字符串转大写_Python字符串大写()
- 银价近期持续行情寡淡,关注病毒恐慌情绪的避险需求