正文

多语言国际化(代码片段)

xc-xinxue  xc-xinxue  2023-04-11  725

关键词：

国际化多语言支持是现在系统通常都要具备的功能，Vue对国际化提供了很好的支持。

1. 安装依赖

首先需要安装国际化组件，执行yarn add vue-i18n命令，安装i18n依赖。

2.添加配置

在src下新建i18n目录，并创建一个index.js.

import Vue from ‘vue‘
import VueI18n from ‘vue-i18n‘

Vue.use(VueI18n)
 
// 注册i18n实例并引入语言文件，文件格式等下解析
const i18n = new VueI18n(
  locale: ‘zh_cn‘,
  messages: 
    ‘zh_cn‘: require(‘@/assets/languages/zh_cn.json‘),
    ‘en_us‘: require(‘@/assets/languages/en_us.json‘)
  
)

export default i18n

然后在assets目录下创建两个多语言文件，如图所示：

zh_cn.json:


    "common": 
        "home": "首页",
        "login": "登录",
        "logout": "退出登录",
        "doc": "文档",
        "blog": "博客",
        "projectRepo": "项目",
        "myMsg": "我的消息",
        "config": "系统配置",           
        "backup": "备份",
        "restore": "还原",
        "backupRestore": "备份还原",
        "versionName": "版本名称",             
        "exit": "退出"
    ,
    "action": 
        "operation": "操作",
        "add": "新增",
        "edit": "编辑",
        "delete": "删除",
        "batchDelete": "批量删除",
        "search": "查询",
        "loading": "拼命加载中",
        "submit": "提交",
        "comfirm": "确定",
        "cancel": "取消",
        "reset": "重置"

en_us.json:


    "common": 
        "home": "Home",
        "login": "Login",
        "logout": "Logout",
        "doc": "Document",
        "blog": "Blog",
        "projectRepo": "Project",
        "myMsg": "My Message",
        "config": "Config",
        "backup": "Backup",  
        "restore": "Restore",  
        "backupRestore": "Backup Restore",  
        "versionName": "Version",  
        "exit": "Exit"
    ,
    "action": 
        "operation": "Operation",
        "add": "Add",
        "edit": "Edit",
        "delete": "Delete",
        "batchDelete": "Batch Delete",
        "search": "Search",
        "loading": "loading",
        "submit": "Submit",
        "comfirm": "Comfirm",
        "cancel": "Cancel",
        "reset": "Reset"

在main.js中引入i18n并注入vue对象中：

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import api from ‘./http‘
import i18n from ‘./i18n‘
import global from ‘@/utils/global‘
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘
import ‘font-awesome/css/font-awesome.min.css‘

Vue.use(ElementUI)  // 注册使用Element
Vue.use(api)  // 注册使用API模块

Vue.prototype.global = global // 挂载全局配置模块

new Vue(
  el: ‘#app‘,
  i18n,
  router,
  render: h => h(App)
)

3.字符引用

在原本使用字符串的地方引入国际化字符串。

打开Home.vue,在模板下面添加一个国家化字符串和两个按钮做中英文切换。

<h3>$t(‘common.doc‘)</h3>
    <el-button type="success" @click="changeLanguage(‘zh_cn‘)">简体中文</el-button>
    <el-button type="success" @click="changeLanguage(‘en_us‘)">English</el-button>

在方法声明区域添加以下方法，设置国际化语言：

// 语言切换
    changeLanguage(lang) 
      lang === ‘‘ ? ‘zh_cn‘ : lang
      this.$i18n.locale = lang
      this.langVisible = false

通过this.$i18n.locale = xx方式就可以全局切换语言，Vue框架会根据locale的值读取对应的国际化多语言文件并进行适时更新。

javafx:多语言适配(代码片段)

JavaFX:多语言适配JDK国际化：ResourceBundle.html其他资源：TornadoFX编程指南，第10章，FXML和国际化、JavaFX的ResourceBundle使用创建ResourceBundle资源ResourceBundle获取资源publicclassResourceBundleUtilprivatestati 查看详情

android国际化多语言切换(代码片段)

关于App国际化，之前有讲到国际化资源、字符换、布局相关，想要了解的猛戳用力抱一下APP国际化。借着本次重构多语言想跟大家聊一下多语言切换，多语言切换对于一款国际化App来讲是重中之重，并非难事，... 查看详情

#前后端国际化多语言配置(代码片段)

前后端国际化多语言配置前端（VueElementUI）项目前端使用Vue+Elementui编写i18n.js在这个js中引入ElementUI的多语言资源，引入本地的多语言资源//I18nimportVueI18nfrom'vue-i18n'importVuefrom'vue'importlocalefrom'element-ui/l... 查看详情

国际化intlflutter国际化多语言实践(代码片段)

目标：实现flutter国际化提示：这里参考一下几个链接例如：https://github.com/ThinkerWing/languagehttps://juejin.cn/post/6844903823119482888这篇也很详细，还有包括兼容中文的繁体简体…可以看看feat/use-Flutter-Intl该分支对应的提交... 查看详情

ios国际化(多语言)(代码片段)

一、应用程序国际化包括app名称和各种权限的提示文字。1.1创建工程，再在“PROJECT”的“Info”里面，添加所需语言。1.2从代码中分离出文本创建一个“.strings”扩展名的文件来本地化字符串，需要把这些字符串全部... 查看详情

多语言国际化(代码片段)

国际化多语言支持是现在系统通常都要具备的功能，Vue对国际化提供了很好的支持。1.安装依赖首先需要安装国际化组件，执行yarnaddvue-i18n命令，安装i18n依赖。2.添加配置在src下新建i18n目录，并创建一个index.js.importVuefrom‘vue‘im... 查看详情

react项目多语言国际化：react-i18next插件实现——本地数据篇(代码片段)

如何理解多语言国际化？图片中下拉部分已经清楚的说明了多语言国际化是什么了。个人理解：它就是我们在网站上可以通过切换语言类型来实现同一功能的不同语言展示效果。react-i18next介绍react-i18next是一个强大的React/ReactNativ... 查看详情

yii2api接口实现国际化多语言设置(代码片段)

1)在/config/main.php下添加如下代码：‘components‘=>[‘language‘=>‘zh-CN‘,‘i18n‘=>[‘translations‘=>[‘*‘=>[‘class‘=>‘yii\\i18n\\PhpMessageSource‘,‘basePath‘=>‘@application/messages‘,//ap 查看详情

android产品研发--＞实现国际化（多语言）(代码片段)

简介最近工作中突然要求要项目进行国际化，之前没遇到过。但是也很简单呀，只需要把添加一个相应语言的的strings.xml的资源文件就好了，不是吗？这样只要切换系统语言就能切换app的文字语言了。效果图实现1.... 查看详情

低代码平台多语言国际化（i18n）技术方案

国际化（Internationalization，简称i18n）：指软件开发应当具备支持多种语言和地区的功能。也就是说能够具备切换页面显示语言的功能。i18n，其中“I”和“n”分别为首末字符，18则为中间的字符数。低代码平台/零代码平台中使用... 查看详情

angularjs国际化多语言，angular-translate教程详解，$translate.instant()为什么不生效(代码片段)

壹?引最近项目要求支持国际化多语言，由于项目用的还是angularjs，那么首当其冲的选择了angularjs封装的I18N插件angular-translate，本文主要会从三个方向展开讨论，一是基本用法，怎么用，代码是什么意思；二是问题解答，比如$tran... 查看详情

vscode使用国际化多语言插件-i18nally&vuei18n-插件使用(代码片段)

i18nAlly&Vuei18n 用户使用vscode打开代码时安装插件后可能会自动在工作区生成这行配置"vue-i18n.i18nPaths":"src\\\\common\\\\lang",注：多语言路径"i18n-ally.localesPaths":["src/common/lang"]Vue2.x配置安装npminstallvue-i18n... 查看详情

国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json(代码片段)

国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json文章目录国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json前言一、参考链接二、使用步骤三、使用演示四、代码五、另外一种实现代码前言提示：以下是本篇文... 查看详情

国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json(代码片段)

ios国际化(多语言)(代码片段)

netcore国际化最佳实践(代码片段)

NetCore国际化最佳实践ASP.NETCore中提供了一些本地化服务和中间件，可将网站本地化为不同的语言文化。ASP.NETCore中我们可以使用Microsoft.AspNetCore.Localization库来实现本地化。但是默认只支持使用资源文件方式做多语言存储，... 查看详情

springboot多语言

springboot-参数验证提示语言动态变化的实现https://www.jianshu.com/p/dbf0400b2175SpringBoot整合国际化I18nhttps://www.2cto.com/kf/201905/808080.html我们公司的springboot国际化（多语言）解决方案，有demohttps://blog.csdn.net/pangdongh/article/de 查看详情