前言
目前有比较成熟的方案 (vue-I18N) 了解了下, 并且实用了一下感觉对于我在使用的项目来说略显臃肿, 功能比较多, 所以压缩的会比较大, 在移动端不太适合所以自己花一天时间撸了一个 vue 多语言插件, 压缩后大小不超过 2kb
使用方法
通过 vue.js 公开方法 install 安装, 参数 lang 为初始化默认语言, 参数 messages 为初始语言库, 也可以在组件中新增多语言, 语言库格式参照其他开源的国际化项目
安装
GitHub 地址: https://github.com/xiejun-net/smart-vue-i18n
yarn add smart-vue-I18N
初始化
- // 插件方式引用
- // messages 为语言库
- import { messages } from '@/utils/i18n-message/open-account/apply/index.js'
- import I18N from 'smart-vue-i18n'
- Vue.use(I18N, {
- lang: 'zhCHT',
- messages
- })
语言库格式
- // 语言库格式
- import { zhCHS } from './zh-chs'
- import { zhCHT } from './zh-cht'
- export const messages = {
- // 简体中文
- zhCHS,
- // 繁体中文
- zhCHT
- }
- // './zh-chs'
- export const zhCHS = {
- personalInfo: '个人资料',
- }
- // './zh-cht'
- export const zhCHT = {
- personalInfo: '個人資料',
- }
组件内使用
直接在组件内定义 I18N 多语言源 然后可以在页面使用切换语言可以不用刷新页面 方法 this.$I18N.setLang('zhCHS')组件内 JS 使用 this.$t('personalInfo')组件内 html 使用 $t('personalInfo')
- <template lang="pug">
- yx-container.apply-home
- .apply-main(slot="main")
- .personalInfo {{$t('personalInfo')}}
- .apply-main-add-credit(@click="testHandler") {{$t('test.a')}}
- </template>
- <script>
- export default {
- I18N: {
- zhCHS: {
- test: {
- a: '简体'
- }
- },
- zhCHT: {
- test: {
- a: '简体'
- }
- }
- },
- methods: {
- testHandler() {
- this.$I18N.setLang(this.$I18N.lang === 'zhCHS' ? 'zhCHT' : 'zhCHS')
- console.log(this, this.$I18N.lang)
- }
- }
- }
- </script>
原理解析
核心代码
- const _vm = new Vue({
- data: options
- })
- Object.defineProperty(Vue.prototype.$I18N, 'lang', {
- get() {
- return _vm.lang
- }
- })
将多语言挂载到 vue 原型上
然后 Object.defineProperty 监听 Vue.prototype.$I18N 变化
通过 new Vue() 创建实例来实现语言切换实时渲染, 可以不需要刷新页面
其他
时间仓促, 一些常用的功能暂时没有, 后续加上
欢迎使用并提出意见
来源: https://www.cnblogs.com/net-xiejun/p/10658562.html