topkee 多语言托管服务 js版sdk

在多语言管理后添加项目

记住项目的appid和appsecret， 假设你的项目 appid='111111' appsecret='222222'

安装sdk

npm i topkee-lang-service-jssdk

i18n初始化

//---下面代码一般放在setupI18n.js(ts)里

/**
 * vue3 js版 加载所有语言配置
 * 得到一个类似{en:{英文配置},'ch-CN':{简体中文配置}...}这样的大对象
 * @param path 路径
 * @returns {{}}
 */
const  loadMessages=(path)=> {
    let messages={};
    if(require){
        const context = require.context(path, false, /[a-z0-9-_]+\.(js|json)$/i);
        messages = context
            .keys()
            .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))
            .reduce(
                (messages, { key, locale }) => ({
                    ...messages,
                    [locale]: context(key),
                }),
                {}
            );
    }else{
        console.warn('require&&require.context is null 未加载到本地语言')
    }
    return messages;
}

/**
 * vue3 ts版 加载所有语言配置
 * @param path 路径
 * @returns {T}
 */
const loadMessages=(path)=>{
    const files=import.meta.globEager(`${path}/*.ts`)
    const keys=Object.keys(files)

    const messages =keys.map((key) => ({ key, locale: key.replace(/(.*\/)*([^.]+).*/ig,"$2")} ))
        .reduce(
            (messages, { key, locale }) => ({
                ...messages,
                [locale]: files[key].default.message||files[key].default,
            }),
            {}
        );

    return messages;
}

let messages=loadMessages('./lang');

// i18n配置
const options ={
    fallbackLocale: local,//预设语言环境
    globalInjection:true,
    legacy:false,
    locale: local,		//默认显示的语言
    messages:messages
};




// 使用langSdk合并服务端语言配置
export async function setupI18n(app) {
    const messages = loadMessages();
    const appid='111111';
    const appsecret='222222';
    const langSdk = new LangSdk(appid,appsecret,(_local, _messages)=>{
        console.log(_local, JSON.stringify(_messages)); // 打印本地语言配置
    });
    await langSdk.init();
    await langSdk.loadLocalesMessages(messages)
    const options = await createI18nOptions();
    options.messages =await langSdk.getMessages();
    i18n = createI18n(options) as I18n;
    app.use(i18n);
}

安装i18n

// ---下面代码一般在mian.js(ts)里

import {setupI18n} from './setupI18n'

async function bootstrap() {
    const app=createApp(App)
    // 安装i18n
    await setupI18n(app)
    
    app.mount('#app')
}
bootstrap();

获取本地配置的json

• 运行项目，在浏览器里打开项目的某个页面，按F2选择console面板，刷新页面后，会看到打印出的语言配置,前提是console.log(_local, JSON.stringify(_messages))没有注释

    const langSdk = new LangSdk(appid,appsecret,(_local, _messages)=>{
          console.log(_local, JSON.stringify(_messages)); // 打印本地语言配置
      });

• 建立lang-upload目录，在目录里新建json文件，比如en.json,然后将consloe打印的en对应的配置复制进这个文件里，别的语言以此类推

配置上传及下载

在package.json的scripts里添加一行

"lang:upload": "topkeelang-upload APPID=111111 APPSECRET=222222 PATH=./src/locales/lang-upload"

参数解释： APPID 多语言项目的appid APPSECRET 多语言项目的appsecret PATH 要上传的配置的目录，只支持json文件或者module.exports={} 导出格式的js文件

其他语言sdk

• topkee-lang-service-phpsdk
• topkee-lang-service-jssdk