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
内容为:
![](https://upload-images.jianshu.io/upload_images/18327122-4adf6ad8dc790530.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
en.js
![](https://upload-images.jianshu.io/upload_images/18327122-540116173c182b53.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
zh.js
4、新建一个common组件:
HTML模板:
![](https://upload-images.jianshu.io/upload_images/18327122-71413d00293067fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
HTML模板
data数据:
![](https://upload-images.jianshu.io/upload_images/18327122-b1aa12561d646c68.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
data数据
6、回到main.js中创建一个i18n的实例,并挂载到vue实例中
![](https://upload-images.jianshu.io/upload_images/18327122-10983221735f1d8e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
vue-i18n实力创建并挂载
7、其实到这一步,已经基本差不多了,但是有人会问,为什么在i18n上使用了本地存储,其实这里我是为了实现点击按钮,页面不刷新、且更换语言,不然的话,我们就得手动在代码中控制语言的切换,这样做是不允许的,话不多说,直接放代码。
![](https://upload-images.jianshu.io/upload_images/18327122-7b46403f073a7a78.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
App.vue
![](https://upload-images.jianshu.io/upload_images/18327122-af5d4492e843d2bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
App.vue
![](https://upload-images.jianshu.io/upload_images/18327122-ba7a3a7e8d614c9e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
common.vue
注:这里利用了element-ui的一些弹窗效果,所以你需先引入element-ui,还有就是这里用到了路由,记得配置一下路由哈,我们来看一下最终效果图:
![](https://upload-images.jianshu.io/upload_images/18327122-99ab0142a8a19f20.png?imageMogr2/auto-orient/strip)
效果图