vue项目使用i18n实现语言国际化操作

JavaScript011

vue项目使用i18n实现语言国际化操作,第1张

查看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 方法获取语言包中的值。

渲染后的结果：

到这里就大功告成！