1. 前言
- (1) 需求
- (2) vue-i18n插件
- (3) 兼容性
2. 实战
- (1) 安装
- (2) 工程中使用
  - [1] 在main.js中引入vue-i18n
  - [2] 语言资源
  - [3] VueI18n实例
  - [4] 挂载到Vue的实例上
  - [5] 标记在HTML中
  - [6] 标记在js中
- (3) 功能进阶
  - [1] 动态切换语言
  - [2] 语言包
    - 1) 资源文件
    - 2) main.js中引入
    - 3) 资源中换行

1. 前言

(1) 需求

Vue工程，需要实现多语言切换功能。

(2) vue-i18n插件

npm中对vue-i18n的描述及文档

Internationalization plugin for Vue.js
https://www.npmjs.com/package/vue-i18n

我们将使用这个插件实现多语言。

(3) 兼容性

支持Vue.js 2.x以上版本

2. 实战

(1) 安装

npm install vue-i18n

(2) 工程中使用

[1] 在main.js中引入vue-i18n

import VueI18n from 'vue-i18n'Vue.use(VueI18n)

[2] 语言资源

const messages = {//英文en: {message: {hello: 'hello',about: 'about',welcome: "Welcome"}},//简体中文zhCHS: {message: {hello: '你好',about: '关于',welcome: "欢迎"}},//繁体中文zhCHT: {message: {hello: '妳好',about: '關於',welcome: "歡迎"}}

[3] VueI18n实例

const i18n = new VueI18n({//定义默认语言locale: 'en', messages
})

[4] 挂载到Vue的实例上

new Vue({el: '#app',router,i18n, //<====template: '<App/>',components: { App }
})

[5] 标记在HTML中

注意：这里是$t

h3 {{ $t("message.hello") }}

完成上述功能后，我们运行，可以看到内容显示为hello，修改上述第三步的locale为zhCHS后运行，可以看到页面变为了你好。

[6] 标记在js中

computed:{welcomeMessage(){return this.username + ', '+ this.$t("message.welcome");}
},

(3) 功能进阶

[1] 动态切换语言

实际项目中，往往需要动态切换语言，比如当用户点击了其需要的语言。

vue-i18n 提供了一个全局配置参数叫 “locale”，通过改变 locale 的值可以实现不同语言的切换。

在页面中只需要在切换时，修改this.$i18n.locale的值即可。

this.$i18n.locale='zhCHS'

[2] 语言包

实际开发中，语言资源会很多，通常会单独作为语言包的文件放置在工程中。

1) 资源文件

在根目录下的static文件夹中新建lang文件夹，作为语言包。

将不同语言保存成json对象，完成3个js如下。

//en.js
module.exports={message: {hello: 'hello',about: 'about',welcome: "Welcome"}
}

//zhCHS.js
module.exports={message: {hello: '你好',about: '关于',welcome: "欢迎"}
}

//zhCHT.js
module.exports={message: {hello: '妳好',about: '關於',welcome: "歡迎"}
}

2) main.js中引入

import LangEn from '../static/lang/en'
import LangZhCHS from '../static/lang/zhCHS'
import LangZhCHT from '../static/lang/zhCHT'const i18n = new VueI18n({locale: 'en', messages:{'en': LangEn,'zhCHS': LangZhCHS,'zhCHT': LangZhCHT}
})

3) 资源中换行

在开发过程中遇到key对应的内容中，需要进行换行的。用<br>或者<br />都会直接将字符输出到页面。
解决方式：将内容写入绑定元素的v-html中。
例如：

"wish_you_good_luck": "Wishing You a Year of Prosperity. <br /> Good Fortune Starts Here!"p(v-html='$t("message.wish_you_good_luck")')

查看完整demo

使用vue-i18n实现多语言相关推荐

vue中开发多语言（国际化）,vue+i18n（详细教程）
目录第一步: 第二步: 第三步: 第四步: 最后: 前言:我们有时候会遇到一个项目需要支持多语言,而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需 ...
uni-app使用i18n实现多语言的切换及国际化开发
1.首先我们需要安装这个插件,安装的命令为 npm install vue-i18n --save 2.创建我们存放翻译文件的文件夹我这次开发用的是英语和印尼语这两种语言. 这个是英语这个是印尼语 ...
vue i18n 国际化保姆级教程_看不懂自己找原因
1.国际化介绍对于一些跨国项目来说,国际化是尤为重要的,那么什么要国际化呢?国际化的意思就是将我们写的项目,能够根据不同国家的语言,进行翻译,进行切换,方便不同国家的客户使用基本思路如下 ① 定义 ...
前端利用 i18n 实现多语言切换
前端实现多语言切换 : 实现前端页面的资源国际化一.vue 中引用 vue-i18n 实现国际化安装 vue-i18n npm install vue-i18n 新建语言文件包: cn.js / ...
如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包并且修改后不需要重新打包
如何让一个vue项目支持多语言(vue-i18n) 1.安装:npm install vue-i18n --save 2.在main.js中引入vue-i18n import VueI18n from ...
SpringBoot系列之i18n国际化多语言支持教程
SpringBoot系列之i18n国际化多语言支持教程文章目录 1.环境搭建 2.resource bundle资源配置 3.LocaleResolver类 4.I18n配置类 5.Thymelea ...
浏览器扩展开发 - i18n 国际化多语言配置
原文地址:https://waynegong.cn/posts/954.html Chrome 浏览器扩展进行 i18n 国际化多语言适配需要进行三处修改: 在特定目录按照特定格式编写多语言配置的 m ...
vue i18n 多语言文本指定位置动态改变, 实现占位替换
zh.js export const message = {alarm_1010: "ip为{id}xxxxxx", }或export const message = {alarm ...
Vue+i18n多语言动态设置（保姆级案例教程）
效果
vue i18n 国际化使用方法
1 先安装 npm install vue-i18n 2 新建文件assets/js/i18n.js 3 引入vue-i18n并注册到vue上 import VueI18n from 'vue-i ...

使用vue-i18n实现多语言