前言
在项目开发中,成熟的项目往往有国际化的需求,在vue中我们一般使用vue-i18n
来做国际化
但是当我到项目中地址国际化的时候,却犯难了,往常没有碰到过这类需求,正常都是从网上摘抄一份最新的省市区json数据,供我们使用
如果要把地址国际化了,应该怎么办呢?
一个一个翻译肯定时不现实的,去网上搜好像也比较少交这样的资源,要不就是资源地址不全,无法使用,项目中肯定是要准确无误符合我们需求的数据
思考
在网上搜罗了一堆的问题无果后,好像也没有什么实际靠谱的方案
更重要的是对于那种在线api,付费翻译这种方式肯定也不现实,当找到百度翻译开放平台
后,我脑海中突然灵光一现,一开始我的想法就是错误的,为啥要持久的使用别人的服务呢,利用百度翻译
的免费额度
然后把本地省市区数据进行循环、翻译、组合数据,复制,最后保存到本地
说干就干,于是开始了尝试
实践
在百度翻译开放平台
注册后,获得了免费的高级版
随之赶紧去看它的接口文档 api接口文档
查看接口所需传入参数
为了方便数据的处理,新建了一个vue3
项目来进行测试以及生成
贴上代码以及注释
1、封装翻译方法且测试
1 | <script setup lang="ts"> |
2、设置代理
一般在游览器发起请求到不同的域名是肯定会报跨域的,所以我们需要在脚手架设置一个代理服务器 演示中所使用的为vite,在vite.config.ts中进行配置
1 | import { defineConfig } from 'vite' |
3、异步循环 翻译数据
1 | <script setup lang="ts"> |
翻译后数据(全国地级市大全)
1 | export default { |