网站国际化多语言处理工具i18n安装使用方法图文详解

目录
  • 一、首先安装i18n
  • 二、创建语言包文件
  • 三、main.js引入i18n
  • 四、修改App.vue文件
  • 五、页面使用
    • 接下来继续完善,加上切换语言按钮
  • 最后
    • 使用方法,按照上图1234顺序即可
  • 总结

一、首先安装i18n

npm install --save vue-i18n

此时安装的是vue-i18n最新版本,项目跑不起来,后来换成8.27.1版本就好了

npm install --save vue-i18n@8.27.1

二、创建语言包文件

1、在src目录下创建i18n文件夹

2、在i18n文件夹下创建locale文件夹,在local文件夹下创建en.json、zh-CN.json

3、在i18n文件夹下创建i18n.js

import Vue from 'vue';
import Element from 'element-ui'
import VueI18n from 'vue-i18n';
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import en from './locale/en'
import zh from './locale/zh-CN'
const messages={
  en: {
      ...en,
      ...enLocale
  },
  zh: {
      ...zh,
      ...zhLocale
  }
}
let lang = localStorage.getItem('lang');
let locale = lang =='en_US'?'en':'zh';

Vue.use(VueI18n)
const i18n = new VueI18n({
	locale: locale, //设置默认语言
	messages,
    silentTranslationWarn: true
});

Vue.use(Element,{
    i18n:(key,value) => i18n.t(key,value)
})
export default i18n;

三、main.js引入i18n

打开main.js文件,插入以下两行代码

四、修改App.vue文件

在页面刷新时,还要保持语言的正确性(不至于切换成了英文,刷新一下又变成了中文)

五、页面使用

在页面中把中文替换成变量

html  {{ $t('index.title') }}
绑定值  :placehoider="$t('index.title')"
js  this.$t('index.title')

如果是PC端项目,在本地缓存中手动设置语言即可看到效果

接下来继续完善,加上切换语言按钮

切换之后 把所选语言存入本地缓存,window.location.reload() 重载页面

当然可以用别的方法。此时多语言设置基本完成,剩下的就是翻译工作了。

最后

翻译过后,发现满屏英文,不方便阅读。可以借助vscode 插件i18n Ally

https://github.com/lokalise/i18n-ally/wiki/Configurations

该插件不但可以看到中文提示,还是快速翻译和查漏补缺。

vscode 安装好i18n Ally 之后,还需要做个配置,在根目录下找到.vscode文件夹下的settings.json(如果没

有.vscode/setting.json直接新建一个),并在setting.json中做如下配置

{
  "i18n-ally.localesPaths": [
    "pxxxxx/xxxxx/src/i18n/locale",
  ],
  "i18n-ally.keystyle": "nested",
    "i18n-ally.sortKeys": true,
    "i18n-ally.enabledParsers": ["json", "js"],
    "i18n-ally.sourceLanguage": "zh-CN",
    "i18n-ally.displayLanguage": "zh-CN",
    "i18n-ally.enabledFrameworks": [
        "vue"
    ],
    "i18n-ally.translate.engines": ["google-cn", "google","deepl","libretranslate"]
}

使用方法,按照上图1234顺序即可

上图标识4 可以检测遗漏的翻译,可以批量批量翻译,具体用法可以多尝试一下。

总结

到此这篇关于网站国际化多语言处理工具i18n安装使用方法的文章就介绍到这了,更多相关网站国际化多语言处理工具i18n内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue.js国际化 vue-i18n插件的使用详解

    安装方法 1.使用CDN直接引用 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> 2.NPM $ npm install vue-i18n 3.Yarn $ yarn add vue-i18n 使用方法 在这里只介绍v

  • 利用vue-i18n实现多语言切换效果的方法

    前言 有些项目我们需要支持多种语言切换,满足国际化需求. vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化.本文主要介绍使用vue-i18n实现切换中英文效果. 安装vue-i18n 我们使用npm安装vue-i18n. npm install vue vue-i18n --save 引入vue-i18n 首先在 main.js 中引入 vue-i18n. import Vue from 'vue' import App from

  • js使用i18n实现页面国际化的方法

    页面引用的插件 <script type="text/JavaScript" src="${path}/plugings/jQuery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="${path}/js/jquery.i18n.properties.min.js"></script&

  • vue与vue-i18n结合实现后台数据的多语言切换方法

    在XXX.js文件中定义函数: getUser(context,info){ context.$http.get(SERVER_URL+'/users',info).then(function(data){ let err =data.body.error; if(err===0){ let dataObj = data.body.userLists; //获取后台返回的数据 this.users = dataObj.items.map(function (e,i) { //遍历获取的数据,用t

  • vue使用i18n实现国际化的方法详解

    一.前言 在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具.比如: vue + vue-i18n angular + angular-translate react + react-intl jquery + jquery.i18n.property 在4K广告机项目中使用的前端框架为Vue,故而我们将使用vue-i18n这个插件进行国际化功能的实现. 二.最终实现效果 三.国际化的实现 1.首先在自己的项目中安装 vue-i18n

  • 网站国际化多语言处理工具i18n安装使用方法图文详解

    目录 一.首先安装i18n 二.创建语言包文件 三.main.js引入i18n 四.修改App.vue文件 五.页面使用 接下来继续完善,加上切换语言按钮 最后 使用方法,按照上图1234顺序即可 总结 一.首先安装i18n npm install --save vue-i18n 此时安装的是vue-i18n最新版本,项目跑不起来,后来换成8.27.1版本就好了 npm install --save vue-i18n@8.27.1 二.创建语言包文件 1.在src目录下创建i18n文件夹 2.在

  • Python Django的安装配置教程图文详解

    Django 教程 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架,由Python写成. Django遵守BSD版权,初次发布于2005年7月, 并于2008年9月发布了第一个正式版本1.0 . Django采用了MVC的软件设计模式,即模型M,视图V和控制器C. 学习Django前,我们要确定电脑上是否已经安装了Python,目前Python有两个版本,不过这两个版

  • Ubuntu16.04安装Jenkins的方法图文详解

    1.前提准备 JDK已经安装 echo $PATH 创建一个软连接 根据自己jdk安装路径来配置 ln -s /java/jdk1.8.0_231/bin/java /usr/bin/java 机器已经联网 卸载jenkins(如果已经安装就略过) sudo apt-get remove jenkins sudo apt-get purge jenkins sudo apt-get purge --auto-remove jenkins 2.通过如下命令完成安装 wget -q -O - htt

  • Mysql5.7.18的安装与主从复制图文详解

    CentOS6.7安装mysql5.7.18 1.  解压到/usr/local目录 # tar -zxvf mysql-5.7.18-linux-glibc2.5-i686.tar.gz -C /usr/local 2.  mysql-5.7.18-linux-glibc2.5-i686文件夹重命名为mysql # cd /usr/local # mv mysql-5.7.18-linux-glibc2.5-i686/ mysql 3.  新建mysql用户组和mysql用户 # groupa

  • 显示IntelliJ IDEA工具的Run Dashboard功能图文详解

    1.点击IDEA上面工具栏View-->Tool Windows-->Run Dashboard,如下图: 2.如果Tool Windows的子选项里没有找到Run Dashboard,可以在工程目录下找.idea文件夹下的workspace.xml,增加如下组件,如图: 代码: <component name="RunDashboard"> <option name="configurationTypes"> <set&g

  • Go语言学习之结构体和方法使用详解

    目录 1. 结构体别名定义 2. 工厂模式 3. Tag 原信息 4. 匿名字段 5. 方法 1. 结构体别名定义 变量别名定义 package main import "fmt" type integer int func main() { //类型别名定义 var i integer = 1000 fmt.Printf("值: %d, 类型: %T\n", i, i) var j int = 100 j = int(i) //j和i不属于同一类型,需要转换 fm

  • Django框架安装方法图文详解

    本文实例讲述了Django框架安装方法.分享给大家供大家参考,具体如下: Window 下安装 Django 如果你还未安装Python环境需要先下载Python安装包. 1.Python 下载地址:https://www.python.org/downloads/ 2.Django 下载地址:https://www.djangoproject.com/download/ 注意:目前Django 1.6.x以上版本已经完全兼容Python 3.x. Python 安装(已安装的可跳过) 安装Py

  • Python命令行参数解析工具 docopt 安装和应用过程详解

    什么是 docopt? 1.docopt 是一种 Python 编写的命令行执行脚本的交互语言. 它是一种语言! 它是一种语言! 它是一种语言! 2.使用这种语言可以在自己的脚本中,添加一些规则限制.这样脚本在执行的时候就必须按照这样格式来执行,同时,也可以很方便的编写一些帮助信息(其实很多软件在输入 -h 的时候显示信息 .例如 python -h ,会显示所有的 python 指令,并且页通过 docopt 限制了 python 指令的格式),下面是一些简单的例子: docopt 的安装 d

  • Linux NFS服务器的安装与配置方法(图文详解)

    一.NFS服务简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操作系统能够彼此分享个别的数据,让应用程序在客户端通过网络访问位于服务器磁盘中的数据,是在类Unix系统间实现磁盘文件共享的一种方法. NFS 的基本原则是"容许不同的客户端及服务端通过一组RPC分享相同的文件系统",它是独立于操作系统,容许不同硬件及操作系统的系统共同进行文件的分享. NF

  • window平台安装MongoDB数据库图文详解

    本文介绍了window平台安装MongoDB数据库的详情,具体如下 官网:www.mongodb.org 安装-->设置环境变量-->启动 1.下载: 根据系统下载 32 位或 64 位的 .msi 文件,下载后双击该文件,按提示安装即可, 国外网站打开运行速度比较慢.现在给个国内下载地址.http://www.jb51.net/softs/41751.html 2.设置安装目录: 通过点击 "Custom(自定义)" 按钮来设置你的安装目录,我将其安装在D:\MongoD

随机推荐