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

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

 const i18n = new VueI18n({
 //切换语言直接修改locale的值即可
　　//this.$i18n.locale = ..
 locale: 'zh-CN',
 //使用require引入中英文文件
 messages:{
 　　"EN": require('./EN.js'),
 　　"zh-CN": require('./zh-CN.js')
 　　}
 })

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

ZN.js

 export const message = {
 　　AllProduct: '全部产品',
 　　LatestReports:"最新报道"
 }

EN.js

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

index.vue

 <template>
 　　<div>
 　　　　{{$t('message.AllProduct')}}
 　　</div>
 </template>

//全部产品

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