i18n-pro国际化自动编译
node 版本 v14.6.0
https://github.com/i18n-pro/core/blob/v2.0.0/docs/dist/USAGE_zh-CN.md git 使用
案例
- 项目中安装
npm i i18n-pro
或者
yarn add i18n-pro
或者
pnpm i i18n-pro
npx i18n init
命令执行成功后会在当前目录下生成一个 i18nrc.js 的文件,默认配置如下:
在执行翻译前面需要配合文档接入对应的翻译厂商去获取key,我上面是用的腾讯 ,注意node版本,在上面我就是node版本不对导致初始化失败了
在项目中如何引入呢 根目录下创建i18n.js
// i18n.js
import { initI18n } from 'i18n-pro'
const {
t,
setI18n,
withI18n,
} = initI18n({
// 命名空间属性是必须配置的
namespace: 'testI18N',
})
// 这里可以挂载 API 到全局对象上,可以避免不同模块都需要通过 import 来引入 API
// 注意:如果当前你是在某个独立的第三方库或者组件中使用 i18n-pro,不推荐这样做,可能会造成你的用户 API 命名冲突
// 浏览器环境,注意:如果是 Node 环境需要将 window 替换成 global
//#ifdef H5
window.t = t
// console.log("window.t",window.t)
window.setI18n = setI18n
window.withI18n = withI18n
// #endif
// 不挂载 API 到全局对象上的话,需要导出 API 以便于其他模块能使用对应 API
export {
t,
setI18n,
withI18n,
initI18n
}
main.js配置
切记 小程序中无法写入window Object.defineProperty(Object.prototype, “t”,{}}才能写入 不然后续无法调用,我在这儿被坑了半天
// i18n.js
import {t,setI18n} from './i18n.js'
Vue.prototype.t = t
//这里h5可以正常使用
// #ifdef MP-WEIXIN
Object.defineProperty(Object.prototype, "t", {
value: t,
configurable: false,
enumerable: false,
});
Object.defineProperty(Object.prototype, "setI18n", {
value: setI18n,
configurable: false,
enumerable: false,
});
// #endif
// 导入资源包
import en from './i18n/en_US.json'
import zh from './i18n/zh_CH.json'
import zh_TW from './i18n/zh-TW.json'
// 默认中文
//我这里存的本地缓存的
let lang = 'zh';
const storeLang=app.vuex_lang;
if(storeLang!=null && storeLang!='' && storeLang.key!=null && storeLang.key!=''){
lang=storeLang.keyPrefix2;
}
setI18n({
locale: lang,
langs:{
zh,
zh_TW,
en
// ... 其他更多语言
},
})
//小程序额外配置
接下就是先在代码中替换
在第一个配置文件中我设置的方法别名为 FunName t
在页面中使用
在页面替换完毕后 需要在项目根目录下执行 命令
翻译命令
npx i18n t
命令执行成功的话,会在指定的目录下生成语言包文件
下次新增,在次执行就好了,它是增量添加
接着说如何切换 我这里封装了一个切换组件但是切换需要调用的方法后有一点细微差别 h5 用reload(),小程序重新跳转当前页面即可刷新
setI18n({
locale:e.keyPrefix2,
});
this.outShow=!this.outShow;
//#ifdef H5
window.location.reload();
//#endif
//#ifdef MP-WEIXIN
wx.redirectTo({
url:'xxxx',
})
//#endif