多语言切换例子

package.json

@@ -18,6 +18,7 @@
     "normalize.css": "^8.0.1",
     "preloadjs": "^1.0.1",
     "vue": "^2.6.10",
+    "vue-i18n": "^8.15.0",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },

src/assets/lang/en.js

+export const m = { 
+  music: 'Music',//网易云音乐
+  findMusic: 'FIND MUSIC',//发现音乐
+  myMusic: 'MY MUSIC',//我的音乐
+  friend: 'FRIEND',//朋友
+  musician: 'MUSICIAN',//音乐人
+  download: 'DOWNLOAD'//下载客户端
+}

src/assets/lang/zh.js

+export const m = {
+  music: '网易云音乐',
+  findMusic: '发现音乐',
+  myMusic: '我的音乐',
+  friend: '朋友',
+  musician: '音乐人',
+  download: '下载客户端'
+}
\ No newline at end of file

src/example/English.vue

+<template>
+  <div>
+    <h6>多语言切换实例</h6>
+    <button @click="changeLangEvent">切换</button>
+    <div>
+      <label for="sex">语言:</label>
+      <select id="sex" v-model="lang" @change="changeLangEvent">
+        <option value="zh-CN">中文</option>
+        <option value="en-US">英文</option>
+      </select>
+    </div>
+    <div>{{lang}}</div>
+    <div>{{$t('m.music')}}</div>
+  </div>
+</template>
+
+<script>
+import store from '../store';
+export default {
+  data() {
+    return {
+      lang: store.state.lang,
+      scroll:0
+    }
+  },
+  mounted() {
+    $eventbus.$on('changeLang', this.reload)
+  },
+  methods: {
+    reload(){
+      // this.getPageDate().then((res)=>{
+      //   this.scroll = 0
+      //   this.list.data = res.data
+      // })
+    },
+    changeLangEvent() {
+      console.log('改变语言');
+      this.$i18n.locale = this.lang;//关键语句
+      this.$store.commit('changeLang', this.lang)
+      $eventbus.$emit('changeLang', this.lang)
+    }
+  }
+}
+</script>
+

src/main.js

@@ -4,6 +4,8 @@ import router from './router'
 import store from './store'
 import 'normalize.css'
 
+
+window.$eventbus = new Vue()
 // axios配置
 // import './utils/axiosConfig'
 // 微信授权登陆
@@ -32,6 +34,20 @@ import 'mint-ui/lib/style.css'
 import MintUI from 'mint-ui'
 Vue.use(MintUI)
 
+// 添加多语言包
+import VueI18n from 'vue-i18n'
+Vue.use(VueI18n) // 通过插件的形式挂载
+store.commit('setDefaultLang')
+const i18n = new VueI18n({
+  locale: store.state.lang, // 语言标识
+  //this.$i18n.locale // 通过切换locale的值来实现语言切换
+  messages: {
+    'zh-CN': require('./assets/lang/zh'), // 中文语言包
+    'en-US': require('./assets/lang/en') // 英文语言包
+  }
+})
+
+
 // 微信授权
 if (process.env.NODE_ENV === 'development' && !process.env.VUE_APP_BUILD_TYPE) {
   // 调试开发，替换这里token
@@ -46,6 +62,7 @@ if (process.env.NODE_ENV === 'development' && !process.env.VUE_APP_BUILD_TYPE) {
 
 
 new Vue({
+  i18n, // 不要忘记
   router,
   store,
   render: h => h(App)

src/store.js

 import Vue from 'vue'
 import Vuex from 'vuex'
+import axios from 'axios';
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-
+    // 语言
+    lang: 'en-US'
   },
   mutations: {
-
+    setDefaultLang() {
+      if (window.navigator && window.navigator.language.includes('zh')) {
+        this.commit('changeLang','zh-CN') 
+      } else {
+        this.commit('changeLang','en-US') 
+      }
+    },
+    changeLang(state,playload){
+      state.lang = playload
+      axios.defaults.headers.common['lang'] = playload
+    }
   },
   actions: {
 
   }
-})
+})
\ No newline at end of file

src/views/Home.vue

@@ -15,6 +15,7 @@
     <Music />
     <ossExample />
     <specialFont />
+    <English />
   </div>
 </template>
 
@@ -23,6 +24,7 @@
 import Music from '@/components/Music.vue'
 import ossExample from '@/example/ossExample.vue'
 import specialFont from '@/example/specialFont.vue'
+import English from '@/example/English.vue'
 
 export default {
   name: 'home',
@@ -45,7 +47,8 @@ export default {
   components: {
     Music,
     ossExample,
-    specialFont
+    specialFont,
+    English
   }
 }
 </script>

yarn.lock

@@ -8091,6 +8091,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-hot-reload-api%2Fdownload%2Fvue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=
 
+vue-i18n@^8.15.0:
+  version "8.15.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.15.0.tgz#9b11ef8e7a124f67cdf788c8c90a81f3606240ed"
+  integrity sha512-juJ/avAP39bOMycC+qQDLJ8U9z9LtLF/9PsRoJLBSfsYZo9bqYntyyX5QPicwlb1emJKjgxhZ3YofHiQcXBu0Q==
+
 vue-lazyload@^1.0.1:
   version "1.3.3"
   resolved "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz#4df50a271bde9b74c3caf7a228d6e0af50d5682f"