vue-multilang

vue-multilang: 前端多语言加载器

control of languages in vue2

Installation

# npm
npm install vue-multilang --save-dev

Example

cd vue-multilang
npm install
npm run dev

Get Started

in main.js

import Vue from 'vue'
import App from './App.vue'
import VueMultiLang from "vue-multilang"

Vue.use(VueMultiLang)

let multiLang = new VueMultiLang({
    path: './example/lang',
    version: 1,
    lang: ['ar', 'vi', 'th', 'id']
})
new Vue({
    el: '#app',
    multiLang, // 实例名约定 必须multiLang 参考router(vue-router)、store(vuex)
    render: h => h(App)
})

in HTML

<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/vue-multilang.js"></script>

let multiLang = new VueMultiLang({
    path: './example/lang',
    version: 1,
    lang: ['ar', 'vi', 'th', 'id']
})
new Vue({
    el: '#app',
    multiLang, // 实例名约定 必须multiLang 参考router(vue-router)、store(vuex)
    render: h => h(App)
})

More details:

• langCode: 语言码
• countryCode: 国家码
• langObj: 语言包数据
• onReady: 语言包加载完毕后的回调函数 可写多个
  • @param fn(data): data是语言包数据
• template: 模板内容替换 动态替换语言包的内容 匹配规则为%s
  • @param key: 语言包字段
  • @param args: 动态参数列表

use in components - this.$lang inside of any component

export default {
    ...,
    data() {
        return {
            langObj: {},
            lang: ''
        }
    },
    computed: {
        text() {
            /**
             * {'rank': 'my name is %s'} from langObj 
             */
             
            // result: 'my name is dongshaohan'
            return this.$lang.template('rank', ['dongshaohan'])
        }
    },
    created() {
        this.$lang.onReady(() => {
            this.langObj = this.$lang.langObj
            this.langCode = this.$lang.langCode
            this.countryCode = this.$lang.countryCode
        });
    },
    ...
}

use in window - window.$multiLang

window.$multiLang.langCode
window.$multiLang.countryCode
window.$multiLang.langObj
window.$multiLang.onReady
window.$multiLang.template

Config

name	required	type	introduction
lang	yes	array	项目需要配置的语言码集合，写成数组形式['en', 'th', 'id']
path	no	string	语言包路径，默认是空字符串
defaultLang	no	string	设置默认语言，防止匹配不到语言包出错
version	no	string	语言包文件版本号，去缓存
langUrlRegExp	no	string	URL语言码匹配规则，默认/\blang=(.+?)\b/i
langUaRegExp	no	string	UA语言码匹配规则，默认/\blang/(.+?)\b/i
locationUrlRegExp	no	string	URL国家码匹配规则，默认/\blocation=(.+?)\b/i
locationUaRegExp	no	string	UA国家码匹配规则，默认/\blocation/(.+?)\b/i
rtlList	no	array	阅读习惯从右到左的语言码集合
dataType	no	string	语言包文件类型，默认json
callback	no	function	语言包加载成功后回调，参数data为返回的值