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>

//所有產品

 

 

還有一種配置全局變量得方法， 不過不建議使用， 就不貼上來了！