vue-i18n（vuei18n 多语言包下载）

本篇文章给大家谈谈vue-i18n，以及vuei18n 多语言包下载对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue国际化（vue-i18n）
• 2、Vue 项目中实现多语言国际化 ( i18n ）
• 3、VUE：在 vue 3.x 中使用 i18n
• 4、2021-06-22 记一次vue-i18n _t undefined报错问题

Vue国际化（vue-i18n）

三种方式：

1、script引入

2、npm安装

3、yarn安装

main.js文件配置

1.引入i18n国际化插件

2.注册衫行i18n实例并引入语言文件，文件格式等下解析

3.将i18n注入到vue实例中

4.文件格式（json文件）

首先来看zh.json文件老粗，如下：

对应的en.json格式与侍塌镇zh.json一样，只需要把中文改为英文即可，如下：

//html文件需要加{{}}

//js文件

点击进行语言切换，如下：

PS:本文只是用于个人笔记，欢迎纠错，不喜勿喷，谢谢！

/article

[img]

Vue 项目中实现多语言国际化 ( i18n ）

现在项目中很多情况下需要实现 国际化 ，即 多语言 。比较常用的就是 中/英 文的切换。

普遍常用的就是 I18N 了，怎么实现呢？莫急，咱们往下瞅！

第一步：安装

第二步：在 src 目录下新建一个 lang 文件扒唤

一般有三个文件： index.js( 配置 ) 、 zh( 中文 ) 、 en( 英文 )

如果有个更多的语言设置，新增对应的 js 文件即可

注意：所有语言包的内部结构必须一样，方便调用

第三步：main.js 里引入 i18n 的配置

第四步：在页面使用

引入 i18n 以后，会全局注册一个变量 $t

平时我们好此陆取值都是 {{ name }}

现在我们取值是 {{$t(index.title)}} ， index.title 就是在语言里的属性

哇哦，多语言是不是很简单，动起手来，赶紧试试吧友顷！！！

VUE：在 vue 3.x 中使用 i18n

vue 3.x 已经发布一段时间了，如果你在使用，并且有国际化的需求，希望本文能帮到你。

在 vue 中配置国际化，一般使用 vue-i18n。由于目前 v8 版本的 vue-i18n 仅支持 vue 2.x，这里我们需要安装 9 或以上的版本。

NPM：

Yarn：

PNPM：

npm 会自动判断你的 Vue 版本，如果不是 3.0 以上的版本，则会报错：

其他方法可以查看官网：

安装完成之后，就可以创建 i18n 实例了，这里可以根据自己的喜好，在任何地方创建。

为了方便管理，我是在 src/i18n/index.ts 创建哗模。

创建好之局芦圆后，就可以在入口文件引入了。vue 3.x 的入口文件默认是根目录下的 main.ts 或 main.js 。

引入之后，就可以使用了。使用桐塌方法和 vue 2.x 一样，都是通过 $t 方法获取语言包中的值。

渲染后的结果：

到这里就大功告成！

2021-06-22 记一次vue-i18n _t undefined报错问题

正常使用

把实渣族例i18n挂载到Vue实例上就可以（实例变量i18n不可更改，更改回报_t undefined的错误）

***但是由于项目问题，没有new Vue（）实例埋悔，所以把i18n挂到Vue原型

重点******这里注意挂到原型上不能用 Vue.prototype. i18n会弯梁正和vue-i18n内有冲突报错，所以要重新写一个变量

但是新变量会导致直接使用$t()报错_t undefined

注册Vue.prototype.$i18nn = i18n后用法

关于vue-i18n和vuei18n 多语言包下载的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。