广东h5网站建设,贵阳网站设计,淄博企业网站建设公司,图片加字在线制作国际化大家都知道vue-i18n 实现的#xff0c;但是有个问题#xff0c;就是繁杂的抽离中文字符的过程#xff0c;以及翻译中文字符的过程#xff0c;关于这个有些小工具可以希望可以帮到大家
1.安装vue-i18n
npm i vue-i18n8.22.22.ElementUI多语言配置
在src目录下创建…国际化大家都知道vue-i18n 实现的但是有个问题就是繁杂的抽离中文字符的过程以及翻译中文字符的过程关于这个有些小工具可以希望可以帮到大家
1.安装vue-i18n
npm i vue-i18n8.22.22.ElementUI多语言配置
在src目录下创建文件夹lang以及index.js |- src|-lang|-index.js|-th.json # 从资源包中拷入的|-zh.json # 从资源包中拷入的
/src/lang/index.js文件内容如下
import Vue from vue;
import VueI18n from vue-i18n;
// 引入自定义语言
import zh from ./zh.json;
import th from ./th.json;
// 引入element框架语言
import ElementLocale from element-ui/lib/locale;
import thLocale from element-ui/lib/locale/lang/th;
import zhLocale from element-ui/lib/locale/lang/zh-CN;ElementLocale.i18n((key, value) i18n.t(key, value));
Vue.use(VueI18n);
// 准备翻译的语言环境信息
const i18n new VueI18n({locale: localStorage.getItem(lang) || zh, //将语言标识存入localStorage或sessionStorage中页面刷新不会默认中文显示messages: {// 中文语言包zh: {...zh,...zhLocale,},//泰文语言包th: {...th,...thLocale,},},silentTranslationWarn: true, //解决vue-i18n黄色警告value of key xxx is not a string和cannot translate the value of keypath xxx.use the value of keypath as default,可忽略globalInjection: true, // 全局注入fallbackLocale: zh, // 指定的locale没有找到对应的资源或当前语种不存在时默认设置当前语种为中文
});export const langs [{ value: zh, label: 中文 },{ value: th, label: ภาษาไทย }
]export const getLocaleText (lang) {return langs.find(item item.value lang).label
}export const setLocal (lang) {localStorage.setItem(lang, lang)i18n.locale lang
}export default i18n;
/src/lang/zh.json
{复制成功: 复制成功,泰文名称: 泰文名称,个人中心: 个人中心,分配用户: 分配用户,规则组成: 规则组成,库区设置: 库区设置,使用甘特图排产: 使用甘特图排产,修改生成配置: 修改生成配置,出厂检验: 出厂检验,库位设置: 库位设置,分配角色: 分配角色
}/src/lang/th.json
{复制成功: คัดลอกสำเร็จ,泰文名称: ชื่อภาษาไทย,个人中心: ศูนย์ส่วนบุคคล,分配用户: กำหนดผู้ใช้,规则组成: องค์ประกอบของกฎ,库区设置: การตั้งค่าพื้นที่ห้องสมุด,使用甘特图排产: ใช้ Gantt Diagram เพื่อขับไล่การผลิต,修改生成配置: แก้ไขการกำหนดค่าการสร้าง,出厂检验: การตรวจสอบโรงงาน,库位设置: การตั้งค่าไลบรารี,分配角色: กำหนดบทบาท
}
3.在main.js中挂载 i18n的插件
import i18n from /lang// 加入到根实力配置中
new Vue({el: #app,router,store,i18n,render: h h(App)
})
4.配置完成之后使用
在想要使用多语言的页面用$t(‘属性名’)来生成标题。这里的t是引入了i18n之后自动挂载在vue实例上的功能。在script上使用this.$t
div classdashboard-editor-container{{ $t(navbar.welcomes) }} {{ $t(navbar.companyName) }}
/div
在js模块使用
import i18n from ./lang/index
export function tob () {return i18n.t(检测到有新版本)
}5 抽离中文字符
使用vscode 插件 vue-i18n-transform
在项目根目录创建vue-i18n-transform.config.js
module.exports {entry: src, // 编译入口文件夹,默认是 srcoutdir: src/lang, // i18n 输出文件夹 默认是 src/localesexclude: [src/lang/th.json], // 不重写的文件夹, 默认是 [src/locales]extensions: [.vue], // 重写的文件类型默认是 [.js, .vue, .ts]single: false, // 是否为单文件编译, 默认为 false. 如果为 true, 则 entry 需为文件而不是文件夹, 如 entry: src/index.vuefilename: zh, // 输入的中文 json 文件名,默认为 zh_cnuseChineseKey: true // 是否使用中文作为key值默认为false} 在文件鼠标右键有个transformFile i18n的选项点击之后就会自动抽离自动追加到zh.json文件末尾还会自动去重 另外他也有一个node组件
npm i vue-i18n-transform -D 支持整个项目一键抽离中文
npx vue-i18n-transform
6 将中文翻译成泰文可以使用chatGPT 翻译很好用不用一个个翻译也不用安装一堆插件还要配百度翻译key
