经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 数据库/运维 » Windows » 查看文章
vue-i18n实现vue对语言切换,国际化。
来源:cnblogs  作者:blucesun  时间:2019/9/2 9:20:21  对本文有异议

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

 


效果图

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

 

原文链接:http://www.cnblogs.com/blucesun/p/11442430.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号