Vue多语言支持

Posted jyughynj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue多语言支持相关的知识,希望对你有一定的参考价值。

i18n插件实现多语言支持,本文以中英文为例记录一下配置过程。

1.配置

1.1安装:npm install vue-i18n --save
1.2创建中英文配置项文件
src/lang目录下创建以下文件:
技术图片
 
en.js  // 配置英文显示的内容
1 export default 
2   ‘home‘: 
3     ‘route‘: ‘Tour Route‘,
4     ‘report‘: ‘Issue Report‘
5   
6 

zh.js  // 配置中文显示的内容

1 export default 
2   ‘home‘: 
3     ‘route‘: ‘游览路线‘,
4     ‘report‘: ‘问题上报‘
5   
6 

1.3配置i18n

 i18n.js  //这里面配置i18n插件

引入Vue, vue-i18n,导入中英文内容文件zh.js 和en.js

(项目使用了iview组件,所以有iview相关的文件引入) 

 1 import Vue from ‘vue‘
 2 import I18n from ‘vue-i18n‘
 3 import zh from ‘./zh‘
 4 import en from ‘./en‘
 5 import iviewEn from ‘iview/dist/locale/en-US‘
 6 import iviewZh from ‘iview/dist/locale/zh-CN‘
 7 
 8 Vue.use(I18n)
 9 const messages = 
10   en: Object.assign(en, iviewEn),
11   zh: Object.assign(zh, iviewZh)
12 
13 
14 function getLocal () 
15   let lang = ‘en‘
16   if (Vue.env && Vue.env.language) 
17     lang = Vue.env.language
18   
19   return lang
20 
21 
22 const i18n = new I18n(
23   locale: getLocal(),
24   messages
25 )
26 
27 export default i18n
 
main.js中导入i18n,放入Vue的实例中,这样所有组件都可以使用了。
(  项目使用了iview组件,所以有如下配置
13 Vue.use(iView, 
14   i18n: (key, value) => i18n.t(key, value)
15 )
) 
 1 import Vue from ‘vue‘
 2 import App from ‘./App‘
 3 import router from ‘./router‘
 4 import ‘./assets/iconfont/iconfont.css‘
 5 import iView from ‘iview‘
 6 import ‘./assets/css/mapbox-gl-v0.54.0.css‘
 7 import ‘./assets/iview-styles/iview.css‘
 8 import axios from ‘axios‘
 9 import i18n from ‘./lang/i18n‘
10 
11 Vue.config.productionTip = false
12 
13 Vue.use(iView, 
14   i18n: (key, value) => i18n.t(key, value)
15 )
16 
17 new Vue(
18   el: ‘#app‘,
19   router,
20   i18n,
21   components: App,
22   template: ‘<App/>‘
23 )

 

2.使用:

html中直接使用 $t("home.report") 即可获取zh.js或en.js中home对象的report属性

1 <i-col span="11" >
2      <Button size="large" type="text" custom-icon="iconfont icon-shangbaowenti" @click="report">
3                 $t("home.report")
4       </Button>
5 </i-col>

js中通过Vue实例的$t获取

1 mounted () 
2     console.info(this.$t("home.report"))
3   

 

切换语言时只需要改变$i18n.locale的值即可。

1 switchLanguage () 
2     this.$i18n.locale = ‘zh‘  // ‘en‘
3 

 使用vue-i18n插件做语言切换比较方便,记录一下,欢迎留言交流~

 

 

以上是关于Vue多语言支持的主要内容,如果未能解决你的问题,请参考以下文章

vue项目支持多语言(vue-i18n)

多语言国际化

# 前后端国际化多语言配置

# 前后端国际化多语言配置

使用 Vue.js 制作多语言网站

推荐VSCode多语言开发,支持一键JAVA