vue2 国际化的使用,自动翻译文件,自动生成国际化文件

vue2 国际化的使用,自动翻译文件,自动生成国际化文件

  1. npm i vue-i18n@6
    在这里插入图片描述
  2. 文件代码
// zh.js  用来写全局通用的国际化
export default {home:"首页"
}
//en.js  用来写全局通用的国际化
export default {home:"home page"
}
//kor.js  用来写全局通用的国际化
export default {home:"첫 페이지"
}
// index.js
/** @Author: xyx* @Date: 2024-01-30 13:47:20* @LastEditors: xyx* @LastEditTime: 2024-01-30 14:26:14* @FilePath: \xyjc\idc_platform_h5\lang\index.js* @Description: */import zh from './zh.js'
import en from './en.js'
import kor from './kor.js'import VueI18n from 'vue-i18n'; 
import Vue from 'vue'
Vue.use(VueI18n);// 自动引入  ./module 下面的所有js (对自动翻译的文件,自动生成的国际化文件 进行自动引入)
// 上图中的 ./module 下的文件 为自动生成的文件
const modulesFiles = require.context("./module", true, /\.js$/);const modules = modulesFiles.keys().reduce((modules, modulePath) => {const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");const value = modulesFiles(modulePath);modules[moduleName] = value.default;return modules;
}, {});let zhList = {...zh}
let enList = {...en}
let korList = {...kor}
for (const key in modules) {if (Object.hasOwnProperty.call(modules, key)) {const el = modules[key];console.log(el)zhList = Object.assign({}, zhList, el.cn)enList = Object.assign({}, enList,el.en)korList = Object.assign({}, korList,el.kor)}
}const i18n = new VueI18n({locale: 'kor',messages: {'cn': zhList,//简体'en':enList,//英文'kor':korList,//英文}
})
export default i18n;
// main.js 全局引入
import i18n from '@/lang/index.js';
const app = new Vue({i18n,
})
// 页面使用// 切换为英文this.$i18n.locale = "en"// 切换为中文this.$i18n.locale = "zh"// 切换为韩文this.$i18n.locale = "kor"

***重点来了。。。。。。***

  1. 开发工具使用 vscode
  2. vscode搜索插件Du I18N并安装
    在这里插入图片描述
    6.
  3. 安装好之后,点击设置,自动生成配置文件 du-i18n.config.json
    在这里插入图片描述
//du-i18n.config.json{"quoteKeys": ["this.$t","$t","i18n.t"],"defaultLang": "zh","tempLangs": ["zh","en","kor"],"langPaths": "**/utils/i18n/locale/**","transSourcePaths": "**/utils/i18n/source/**","tempPaths": "**/utils/i18n/temp/**","tempFileName": "i18n","multiFolders": ["src","pages"],"uncheckMissKeys": [],"isSingleQuote": true,"isOnlineTrans": true,// 下图中的APP ID"baiduAppid": "***************", // 下图中的秘钥"baiduSecrectKey": "***************"
}
  1. 插件官网 https://fanyi-api.baidu.com/doc/21 有详细的配置 生成文件的位置
  2. 需要登录翻译开放平台 申请key 并且认证
    在这里插入图片描述
  3. 开始使用
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    将生成的文件放到 module 下面 后缀改为js
    在这里插入图片描述
    在这里插入图片描述
    搞定! 以上为全部流程 解放翻译时间,缩短工期

博文虽然长 但是都很简单!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/248059.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Security ❀ HTTP/HTTPS逐包解析交互过程细节

文章目录 1. TCP三次握手机制2. HTTP Request 请求报文3. HTTP Response 响应报文4. SSL/TLS协议4.1. ClientHello 客户端Hello报文4.2 ServerHello 服务器Hello报文4.3. *ServerKeyExchange 服务公钥交换4.4. ClientKeyExchange 客户端公钥交换4.5. *CertificateVerify 证书验…

蓝桥杯---九数组分数

1,2,3 ... 9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码。 注意,只能填写缺少的部分,不要重复抄写已有代码。不要填写任何多余的文字。 代码 public class _05九数组分数 {public static void test(int[] x){int a …

[网鼎杯 2018]Fakebook1

join一个用户后,点进去发现是这样的 查看这个页面的源代码,发现一个base64编码后的字串 decode之后就是我们join新用户时填入的blog网址 那我们是不是可以通过填入存储flag的地址,从而回显出来呢?当然,先按照常规sqli…

C语言应用实例——贪吃蛇

(图片由AI生成) 0.贪吃蛇游戏背景 贪吃蛇游戏,最早可以追溯到1976年的“Blockade”游戏,是电子游戏历史上的一个经典。在这款游戏中,玩家操作一个不断增长的蛇,目标是吃掉出现在屏幕上的食物&#xff0c…

物联网IOT视频设备如何快速对接阿里云生活物联网(Link Visual)并成功上云?

原文永久更新地址:https://www.yundashi168.com/472.html 文章来源:猿视野 如果有图片看不清楚,加载不出来,请阅读原文。 什么是Link Visual、 Link Visual是生活物联网平台针对视频产品推出的增值服务,提供视频数据上…

第一节 分布式架构设计理论与Zookeeper环境搭建

目录 1. 分布式架构设计理论 1. 分布式架构介绍 1.1 什么是分布式 1.2 分布式与集群的区别 1.3 分布式系统特性 1.4 分布式系统面临的问题 2. 分布式理论 2.1 数据一致性 2.1.1 什么是分布式数据一致性 2.1.2 副本一致性 2.1.3 一致性分类 2.2 CAP定理 2.2.1 CAP定…

Habitat环境学习二:导航任务中的Habitat-sim基础Habitat-sim Basics for Navigation

导航任务在Habitat-sim任务中的实现 官方教程概述重要概念1、Hello World程序1.0.1 基础设置Basic settings1.0.2 模拟器设置Configurations for the simulator1.0.3 创建模拟器实例1.0.4 初始化Agent1.0.5 导航和探索 官方教程 Habitat是一个高效的真实的3D模拟器&#xff0c…

【C++进阶】STL容器--list使用迭代器问题分析

目录 前言 1. list的基本使用 1.1 list构造函数 1.2 list迭代器 1.3 list capacity 1.4 list元素访问 1.5 list 修改操作 insert erase swap resize clear 2. list失效迭代器问题 3. list使用算法库函数问题 总结 前言 list(链表)在C中非常重要…

OpenAI发布新模型!ChatGPT性能重磅提升,API大幅降价,GPT-4 「变懒」被修复

OpenAI 对ChatGPT进行了大更新:推出了新一代的嵌入模型,对GPT-4 Turbo模型进行了更新,并将很快对GPT-3.5 Turbo的API进行大幅降价,GPT-4「变懒」行为也被修复。 接下来二狗就带大家看看ChatGPT的这次详细更新。 推出新的嵌入模型…

Shell中sed编辑器

1.简介 sed是一种流编辑器,流编辑器会在编辑器处理数据之前基于预先提供的一组规则来编辑数据流。 sed编辑器可以根据命令来处理数据流中的数据,这些命令要么从命令行中输入,要么存储在一个 命令文本文件中。 2.sed编辑器的工作流程 sed…

Adobe Photoshop 2024 v25.4.0 - 专业的图片设计软件

Adobe Photoshop 2024 v25.4.0更新了,从照片编辑和合成到数字绘画、动画和图形设计,任何您能想象到的内容都能通过PS2024轻松实现。 利用人工智能技术进行快速编辑。学习新技能并与社区分享您的工作。借助我们的最新版本,做令人惊叹的事情从未…

【C/C++ 05】快速排序

快速排序是Hoare于1962年提出的一种二叉树结构的交换排序算法,其基本思想是:任取待排序序列中的某元素作为基准值,按照该基准值将待排序集合分割成两个子序列,左子序列中所有元素均小于基准值,右子序列中所有元素均大于…

uniapp H5 实现上拉刷新 以及 下拉加载

uniapp H5 实现上拉刷新 以及 下拉加载 1. 先上图 下拉加载 2. 上代码 <script>import DragableList from "/components/dragable-list/dragable-list.vue";import {FridApi} from /api/warn.jsexport default {data() {return {tableList: [],loadingHi…

路由反射器 RR 配置实验

一、预习&#xff1a; RR&#xff1a;Route Reflect&#xff0c;是为了解决 IBGP 水平分割问题&#xff0c;即&#xff1a;【BGP 路由器从 IBGP 收到的路由&#xff0c;不会传递给其他 IBGP 邻居】&#xff0c;因此需要使用路由反射器&#xff0c;这样&#xff0c;未收到路由的…

【Java反序列化】Shiro-550漏洞分析笔记

目录 前言 一、漏洞原理 二、Shiro环境搭建 三、Shiro-550漏洞分析 解密分析 加密分析 四、URLDNS 链 前言 shiro-550反序列化漏洞大约在2016年就被披露了&#xff0c;在上学时期也分析过&#xff0c;最近在学CC链时有用到这个漏洞&#xff0c;重新分析下并做个笔记&…

260:vue+openlayers 通过webgl方式加载矢量图层

第260个 点击查看专栏目录 本示例介绍如何在vue+openlayers中通过webgl方式加载矢量图层。在做这个示例的时候,采用vite的方式而非webpack的方式。这里的基础设置需要改变一下。 ol的版本7.5.2或者更高。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 文…

如何使用docker compose安装APITable并远程访问登录界面

文章目录 前言1. 部署APITable2. cpolar的安装和注册3. 配置APITable公网访问地址4. 固定APITable公网地址 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 …

【虚拟机数据恢复】异常断电导致虚拟机无法启动的数据恢复案例

虚拟机数据恢复环境&#xff1a; 某品牌R710服务器MD3200存储&#xff0c;上层是ESXI虚拟机和虚拟机文件&#xff0c;虚拟机中存放有SQL Server数据库。 虚拟机故障&#xff1a; 机房非正常断电导致虚拟机无法启动。服务器管理员检查后发现虚拟机配置文件丢失&#xff0c;所幸…

idea 打包跳过测试

IDEA操作 点击蓝色的小球 手动命令 mvn clean package -Dmaven.test.skiptrue# 下载源码![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ff15aad1c9a546b6ab0556b5b135f409.png)

Linux:重定向

Linux&#xff1a;重定向 输出重定向追加重定向输出重定向与追加重定向的本质输入重定向 输出重定向 在Linux中&#xff0c;输出重定向是一种将命令的输出发送到不同位置的方法。通常&#xff0c;执行命令时&#xff0c;输出会显示在终端上。然而&#xff0c;使用输出重定向&a…