vue-i18n 多语言切换实践

882 阅读1分钟
原文链接: mp.weixin.qq.com

实例demo

https://github.com/hu949277923/vue-i18n-demo.git

1、命令行快速搭建vue单页面应用

$ npm/cnpm install -g vue-cli

$ vue init webpack vue-i18n-demo

$ cd vue-i18n-demo

$ npm/cnpm install

$ npm run dev

生成目录接口如下图

2、安装vue-i18u

$ npm/cnpm install --save-dev vue-i18n

3、在/src下新建lang目录

4、新建并编辑/src/lang/index.js

5、新建并编辑/src/lang/chinese.js

6、新建并编辑/src/lang/english.js

7、src/main.js 新增如下图:

8、路由修改 src/router/index.js

9、src/app.vue下新增如下图

10、src/components/HelloWorld.vue

11、访问http://localhost:8080/#/en 为英文,访问 http://localhost:8080/#/zh为中文