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>

//全部产品

 

 

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