前端国际化之i18n（VUE项目）

解释与说明

        i18n，全名是internationalization，称为国际化。

        我理解的就四个字：语言转换。

        让以其他语言作为母语的人能看懂你的前端中的文字。

        我们常用的就是中文简体（zh_CN）与英文（美国）（en_US）的转换。

        当然也可以增添中文繁体（zh_TW）等等你想要的其他语言。

缩写的由来

internationalization，首字母 ​​i​​ 和末字母 ​​n​​ 之间有 ​​18​​ 个字母，故缩写为 ​​i18n​。

与之对应的是L10n，本地化，Localization。

        最好在项目初期就计划使用国际化，这样相对后期使用会大大减少工作量。

项目使用

安装

1，在你的软件中打开控制台

        我使用的是IDEA，其实前端更推荐使用VSCode。

2，进入前端的文件夹

cd web

        我的前端的文件夹名称是web，相应变换成你自己命名的前端文件夹名称。

3，使用下载安装命令

npm install vue-i18n

        我使用的是npm命令，你也可以转换成你使用的命令。我更推荐pnpm，推陈出新嘛，而且使用这个在启动时会更快。

        yarn有点不同：

yarn add vue-i18n

使用

第一步，创建语言库。

1，在src文件夹下创建一个文件夹locales；

2，再在locales文件夹下创建要转换成的语言；

3，在src文件夹下创建i18n.js文件。

注意i18n.js文件是与locales文件夹同级的，都在src文件夹下。

不要被向右的小箭头迷惑了。

先把所有src文件夹下的所有文件夹收缩起来在创建哦。

        我需要的是中文简体和英文（美国），所以是zh-CN.json和en-US.json。

第二步，在相应创建的文件夹下写入代码。

        以我创建的文件为例。

1，在zn-CN.json文件中添加代码：

{ "common": { "confirm": "确定", "cancel": "取消", "pleaseEnterUsernameAndPassword": "请输入账号和密码", "loginSuccess":"登录成功", "loginFail": "登录失败" }， "loginPage": { "title": "XX管理系统", "userLogin": "用户登录", "username":"账号", "password": "密码", "usernamePlaceholder": "请输入账号", "passwordPlaceholder": "请输入密码", "languageLabel": "语言", "loginButton": "登录", "text1":"如有疑问，请联系技术人员以提供支持。" } }

        我使用的命名方法是首个单词首字母小写，其余单词首字母大写，无空格，无连接线，无下划线的形式来存储的。你也可以按照你想要的方式去取名，但是我就不知道会不会出错了，因为我没试过。

        上面的common是消息提示框里的，loginPage是登录页面。

        需要注意的是，.json文件里不允许最后有逗号","，否则会报错，例如下面的：

{ "common": { ... "loginFail": "登录失败"， }， "loginPage": { ... "text1":"如有疑问，请联系技术人员以提供支持。" }， }

里有两处错误的地方：

        需要删除两个逗号才正确。

2，在en-US.json文件中添加代码：

{ "common": { "confirm": "Confirm", "cancel": "Cancel", "pleaseEnterUsernameAndPassword": "Please enter username and password", "loginSuccess":"Login success", "loginFail": "Login fail" }, "loginPage": { "title": "XX Management System", "userLogin": "User Login", "username":"Username", "password": "Password", "usernamePlaceholder": "Please enter username", "passwordPlaceholder": "Please enter password", "languageLabel": "Language", "loginButton": "Login", "text1": "If you have any questions, please contact technical support for assistance." } }

3，在i18n.js文件中添加代码添加代码：

// src/i18n.js import { createI18n } from 'vue-i18n' import zhCN from './locales/zh-CN.json' import enUS from './locales/en-US.json' // 从本地存储中读取用户之前设置的语言，如果没有则使用浏览器语言或默认中文 const savedLocale = localStorage.getItem('user-locale') const browserLocale = navigator.language || 'zh-CN' // 判断浏览器语言是否是英文，否则使用中文 const defaultLocale = savedLocale || (browserLocale.startsWith('en') ? 'en-US' : 'zh-CN') const i18n = createI18n({ legacy: false, // 必须设置为 false，以使用 Composition API 模式 locale: defaultLocale, // 当前激活的语言 fallbackLocale: 'zh-CN', // 如果当前语言包缺少某个翻译，回退到中文 messages: { 'zh-CN': zhCN, 'en-US': enUS } }) // 提供一个方法用于切换语言并持久化 export function setLocale(locale) { i18n.global.locale.value = locale localStorage.setItem('user-locale', locale) } export default i18n

第三步，在逻辑中添加i18n

        在需要转换的vue文件中的scripts标签的顶部写入代码：

import { useI18n } from 'vue-i18n';

        同样在scripts标签中，在所有导入（import）的下面写入代码：

const { t } = useI18n();

        示例：

<script setup> import { useI18n } from 'vue-i18n'; const { t } = useI18n(); //你的其他代码 </script>

第四步，在模板中使用i18n

        在你的想展示可转换文字的地方变成：

{{ $t('     ') }}

        在单引号中间加上你刚刚定义的英文。

        例如我的登录的标题如下

{{$t('loginPage.title')}}

        需要填入外面的大名称和里面的小名称，中间使用英文的点“.”来连接，这样系统才能找到你的自定义的文字。

举一个例子吧：

        例如在我的登录界面（login.vue）中的template中使用i18n：

<template> <div> <div> <div> <div> <img src="@/assets/Logo.png" alt="logo"> </div> <h1>{{ $t('loginPage.title') }}</h1> </div> <div> <div> <h2>{{ $t('loginPage.userLogin') }}</h2> </div> <!-- 账号输入框 - 横向布局 --> <div> <div>{{ $t('loginPage.username') }}</div> <div> <el-icon><User /></el-icon> <input type="text" v-model="loginForm.username" :placeholder="$t('loginPage.usernamePlaceholder')" > </div> </div> <!-- 密码输入框 - 横向布局 --> <div> <div>{{ $t('loginPage.password') }}</div> <div> <el-icon><Lock /></el-icon> <input :type="passwordVisible ? 'text' : 'password'" v-model="loginForm.password" :placeholder="$t('loginPage.passwordPlaceholder')" > <el-icon @click="togglePasswordVisibility" > <View v-if="passwordVisible" /> <Hide v-else /> </el-icon> </div> </div> <!-- 语言选择 - 横向布局 --> <div> <div>{{ $t('loginPage.languageLabel') }}</div> <div> <select v-model="currentLanguage" @change="changeLanguage"> <option value="zh-CN">简体中文</option> <option value="en-US">English</option> </select> </div> </div> <button @click="debouncedLogin">{{ $t('loginPage.loginButton') }}</button> <div> <p>{{ $t('loginPage.text1') }}</p> </div> </div> <div> </div> </div> </div> </template> <script setup> ... </script> <style scoped> ... </style>

        最后再加上逻辑与样式的代码就完成啦！

展示一下

默认中文界面

英文界面