vue-i18n 是一个vue插件,主要作用就是让项目支持国际化多语言。

1.终端输入vue ui 回车打开项目可视化管理系统

选择依赖

安装依赖

Vue项目 vue-i18n 实现项目国际化 -安装依赖_搜索

 

 2.输入 vue-i18n 回车搜索,点击选择依赖,安装依赖

Vue项目 vue-i18n 实现项目国际化 -安装依赖_搜索_02

 安装成功

Vue项目 vue-i18n 实现项目国际化 -安装依赖_Vue2.X_03

 

 3.在VS Code 开发工具中打开项目,在main.js中引入并注入vue-i18n

Vue项目 vue-i18n 实现项目国际化 -安装依赖_html_04

 Vue项目 vue-i18n 实现项目国际化 -安装依赖_字段_05

 

4.创建并定义语言包

en.js

Vue项目 vue-i18n 实现项目国际化 -安装依赖_搜索_06

zh.js

Vue项目 vue-i18n 实现项目国际化 -安装依赖_Vue2.X_07

 

5.使用语言包

main.js

Vue项目 vue-i18n 实现项目国际化 -安装依赖_字段_08

App.vue

在前端HTML中使用:{{$t('main.hello')}}

Vue项目 vue-i18n 实现项目国际化 -安装依赖_Vue2.X_09

在js脚本中使用: this.$t('main.hello')

Vue项目 vue-i18n 实现项目国际化 -安装依赖_html_10

 

 6.打开可视化操作台

 运行之后启动appVue项目 vue-i18n 实现项目国际化 -安装依赖_字段_11

可以看到默认简体中文显示了语言包中定义的 你好!字段。

Vue项目 vue-i18n 实现项目国际化 -安装依赖_多语言_12

Vue项目 vue-i18n 实现项目国际化 -安装依赖_Vue2.X_13

 

7.this.$i18n.locale 实现切换语言功能

 Vue项目 vue-i18n 实现项目国际化 -安装依赖_html_14

 Vue项目 vue-i18n 实现项目国际化 -安装依赖_html_15

 点击切换

Vue项目 vue-i18n 实现项目国际化 -安装依赖_html_16

 

  END