i18n-plugin

2023年05月12日

柏拉文

越努力，越幸运

一、认识

---

我们希望有一个翻译函数, 这个函数接收一个 lang() 作为分隔符, 用来在用户提供的翻译字典中查找对应语言的文本。期望的使用方式如下:

<h1>{{ lang('哈哈哈') }}</h1>

这个函数应当能够在任意模板中被全局调用。

二、思路

---

lang('文本') 应该能够在任意模版中被全局调用, 所以我们应该通过插件将他添加到 app.config.globalProperties

三、实现

---

export default{
    install(app: any,options: {[key:string]: string}){
        app.config.globalProperties.lang = (key:string)=>{
            return options[key];
        }   
    }
}

四、安装

---

import { createApp } from 'vue'
import App from './App.vue'
import cn from "./lang/cn.json"
import en from "./lang/en.json"
import i18nPlugin from './plugins/i18n-plugin'

const lang = 'cn';
const langMap = {
    cn,
    en
}
const app = createApp(App)
app.use(i18nPlugin,langMap[lang]);
app.mount('#app')

其中, cn、en 文件为:

{
    "柏拉文": "柏拉文"
}

{
    "柏拉文": "bolawen"
}