vue-i18n实现vue对语言切换，国际化。

Posted 2022-09-19 blucesun

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，还有就是这里用到了路由，记得配置一下路由哈，我们来看一下最终效果图：

 

效果图

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