vue-i18n achieve vue language switching, international.

1, the installation vue-i18n:

            npm install vue-i18n

            If npm long time no response, or an unsuccessful installation can be replaced with Taobao image installation:

            cnpm install vue-i18n

2, cited in main.js in:

            import VueI18n from 'vue-i18n'

            Vue.use (VueI18n)

3, the new language file in src:

            src/locale/language/zh.js

            src/locale/language/en.js

       Says:

 

 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　en.js

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　zh.js

4, a new common components:

       HTML template:

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML template

data data:

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 data data

6, create an instance of i18n main.js back in, and mount vue examples

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　vue-i18n strength to create and mount

7, in fact, to this point, has almost all the same, but some people may ask, why use local storage on i18n, in fact, where I was to achieve the click of a button, the page does not refresh, and replace the language, otherwise we'll have to manually control switch the language in the code, and is not allowed to do so, did not talk much, put the code directly.

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　App.vue

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　App.vue

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　common.vue

注：这里利用了element-ui的一些弹窗效果，所以你需先引入element-ui，还有就是这里用到了路由，记得配置一下路由哈，我们来看一下最终效果图：

 

效果图

如果有什么不懂的，或者大佬们有一些更好的建议以及经验的分享，欢迎在评论区留言。