查看package.json
i18n.js
在i18n.js文件中,我们不需要关注其他的配置,只需看懂这2项配置即可。
zh.js
en.js
在.vue文件中使用
页面显示中文还是英文取决于i18n.js文件当中的这一行命令
当DEFAULT_LANG = 'zh',页面显示中文
当DEFAULT_LANG = 'en', 页面显示英文
首先 创建i18n文件/lang/index.ts
然后 在main.ts中引入
在vue模板中使用
在外部的ts文件中使用
vue 3.x 已经发布一段时间了,如果你在使用,并且有国际化的需求,希望本文能帮到你。
在 vue 中配置国际化,一般使用 vue-i18n。由于目前 v8 版本的 vue-i18n 仅支持 vue 2.x,这里我们需要安装 9 或以上的版本。
NPM:
Yarn:
PNPM:
npm 会自动判断你的 Vue 版本,如果不是 3.0 以上的版本,则会报错:
其他方法可以查看官网: https://vue-i18n.intlify.dev/installation.html
安装完成之后,就可以创建 i18n 实例了,这里可以根据自己的喜好,在任何地方创建。
为了方便管理,我是在 src/i18n/index.ts 创建。
创建好之后,就可以在入口文件引入了。vue 3.x 的入口文件默认是根目录下的 main.ts 或 main.js 。
引入之后,就可以使用了。使用方法和 vue 2.x 一样,都是通过 $t 方法获取语言包中的值。
渲染后的结果:
到这里就大功告成!