Vue-i18n实现语言切换

方法1 Vue — i18n 国际化 全局配置 

安 装

1.直接引入js文件

<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

安装Yarn

yarn add vue-i18n

main.js

 1 import Vue from 'vue'
 2 import VueI18n from 'vue-i18n'
 3 Vue.use(VueI18n)
 4 
 5 const i18n = new VueI18n({
 7 //切换语言直接修改locale的值便可
　　//this.$i18n.locale = ..
 8 locale: 'zh-CN',
10 //使用require引入中英文文件
11 messages:{
12 　　"EN": require('./EN.js'),
13 　　"zh-CN": require('./zh-CN.js')
14 　　}
15 })
16
18 new Vue({
19 el: '#app',
20 i18n,
21 router,
22 template: '<app/>',
23 components: {
24 　　app，
　　　　i18n
25 　　}
26 })

ZN.js

1 export const message = {
2 　　AllProduct: '所有产品',
3 　　LatestReports:"最新报道"
4 }

EN.js

1 export const message = {
2 　　AllProduct: 'ALL PRODUCT',
3 　　LatestReports: "LATEST REPORTS"
4 }

index.vue

1 <template>
3 　　<div>
5 　　　　{{$t('message.AllProduct')}}
7 　　</div>
9 </template>

//所有产品

 

 

还有一种配置全局变量得方法， 不过不建议使用， 就不贴上来了！