建材做网站好吗,wordpress页脚设置,企业制度型开放论坛,网页制作学情分析前段时间我写了一篇关于项目国际化使用I18n组件的文章#xff0c;Vue3 TS 使用国际化组件I18n#xff0c;那个时候还没真正在项目中使用#xff0c;需求排期还没有定#xff0c;相当于是预研。
当时就看了一下大概怎么用#xff0c;改了一个简单的页面#xff0c;最近需…前段时间我写了一篇关于项目国际化使用I18n组件的文章Vue3 TS 使用国际化组件I18n那个时候还没真正在项目中使用需求排期还没有定相当于是预研。
当时就看了一下大概怎么用改了一个简单的页面最近需求下来了开始整个项目去做了才发现工作量有点大好像也有点傻一个个地取变量名翻译替换。。。换了几个页面之后发现眼睛都要花了又累又困还容易出错于是跟同事吐槽了一下没想到有意外收获好家伙这种好事不早点分享
于是请教了一下同事然后自己也琢磨了一会发现确实真香所以记录一下。 这个插件是基于百度翻译提供的国际多语言本地开发解决方案目前使用很流畅大家也可以从vscode官网 Extensions 模块进去搜索Du I18N 找到该插件也就是这个地址 Du I18N 传送门
一、安装i18n组件、DU I18N插件
// 使用 npm
npm install vue-i18n9
// 使用 yarn
yarn add vue-i18n9在VS code 插件库中搜索安装DU I18N插件
二、生成配置文件
安装完成之后在页面文件点击右键就可以看到国际化选项了点击设置自动生成配置文件du-i18n.config.json 配置文件的配置项可以参考文档根据自己的需要进行配置比如我需要翻译繁体那我就要增加一个语种的配置 语种配置的代码可以参考 百度翻译通用翻译API接入文档 三、一键扫描中文 在/src/i18n/temp/自动生成随机文件路径和文件名都可以自主配置界面中的中文一键替换成了随机变量
四、在线翻译
插件还提供了在线翻译功能需要注册自己的baiduAppid和baiduSecrectKey从百度翻译开放平台注册注册完成后进入管理控制台申请开通服务 再到开发者信息查看自己的baiduAppid和baiduSecrectKey并填写到du-i18n.config.json配置文件中 即可翻译成已经配置的所需的语种如下图无需手动一个个翻译了菜单中还有漏检功能
五、在i18n文件夹新建一个JS文件处理引入语言文件默认语言等
// 引入语言文件
function loadLocaleMessages () {const locales require.context(./locale, true, /[a-z0-9-]\.json$/i);const messages {};locales.keys().forEach(key {const matched key.match(/([a-z0-9-])\./i);if (matched matched.length 1) {const locale matched[1];messages[locale] locales(key);}});return messages;
}// i18n.js
import Vue from vue;
import VueI18n from vue-i18n;Vue.use(VueI18n);const i18n new VueI18n({locale: zh, // set default localemessages: loadLocaleMessages(), // set locale messagessilentTranslationWarn: true,//隐藏这些报错
});export default i18n;然后在main.js里面引用该文件挂载上去
六、最后一步拆分语言文件生成locale文件夹这样就可以在界面上查看是否有效果了
