vue實現對語言的切換，結合vue-il8n。

1、安裝vue-i18n：

            npm install vue-i18n

            如果npm長時間無反應，或安裝失敗，可以換成淘寶鏡像安裝：

            cnpm install vue-i18n

2、在main.js中引用：

            import VueI18n from 'vue-i18n'

            Vue.use(VueI18n)

3、在src下新建語言文件：

            src/locale/language/zh.js

            src/locale/language/en.js

       內容為：

 

 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　en.js

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　zh.js

4、新建一個common組件：

       HTML模板：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML模板

data數據：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 data數據

6、回到main.js中創建一個i18n的實例，並掛載到vue實例中

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　vue-i18n實力創建並掛載

7、其實到這一步，已經基本差不多了，但是有人會問，為什么在i18n上使用了本地存儲，其實這里我是為了實現點擊按鈕，頁面不刷新、且更換語言，不然的話，我們就得手動在代碼中控制語言的切換，這樣做是不允許的，話不多說，直接放代碼。

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　App.vue

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　App.vue

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　common.vue

注：這里利用了element-ui的一些彈窗效果，所以你需先引入element-ui，還有就是這里用到了路由，記得配置一下路由哈，我們來看一下最終效果圖：

 

效果圖

如果有什么不懂的，或者大佬們有一些更好的建議以及經驗的分享，歡迎在評論區留言。