Vue开发者必看：轻松搞定多语言国际化，一招get全球用户

2024-03-30 技术资讯推广

在现今的全球化环境中，为了能够更好地服务全球用户，多语言和国际化成为了一个网站或应用程序的基本需求。安装完成后，我们可以开始处理多语言和国际化。通过使用Vue-i18n插件，处理多语言和国际化变得非常简单。希望这篇文章能帮助你快速上手处理V

接下来咱们就聊聊如何在Vue上轻松实现各种语言和国际视野！现在全球联网速度超快，让全球各地的小伙伴舒适地用咱们的产品，至少也得支持好几种语言和国际化？像Vue这样的工具可给力了，有个秘诀能帮你搞定这些问题，轻松应对多语种和国际化不再是难事！

准备工作

首先，我们得搞定一些前期准备！别慌，先确定下你的电脑里接收到Node.js和npm这两个小兄弟了没。好了以后，在命令行输入下面这段话就能很快安装上好用的Vue CLI咯：


npm install -g@vue/cli
接着，用Vue CLI给自己创建一个新项目：
vue create my-project
直接跟着做，保持原样就行了。完成之后，赶紧看看你的项目文件夹！
cd my-project
直接装上vue-i18n，这是Vue官网上的超棒全球工具！
npm install -g @vue/cli

npm install vue-i18n
搞定这些准备后，就开始搞多语言和国际化这档子大事！
vue create my-app

创建语言文件
先在源码里创建一个新的文件夹，名叫locale。接着在这个文件夹里再创建俩文件——OK了，就是en.json和zh.json，分别给英文用的和我们中文专属的。
en.json举个栗子：
json

{

cd my-app

“hello”:”Hello”,

“welcome”:”Welcome”

}

npm install vue-i18n

zh.json也来一个：

“hello”:”你好”,

“welcome”:”欢迎”

配置Vue-i18n

赶紧动起来，就在咱城 src 里面建个 i18n 文件夹，再弄个 index.js 文件就好，别磨蹭了，快动手！


javascript
import Vue from 'vue';
直接用VueI18n就行。
{
  "hello": "Hello",
  "welcome": "Welcome to my app"
}

Vue.use(VueI18n);
const messages ={
我们在一个模块中加载了"en.json"这个文件。
只需把这个调用`require("./locales/zh.json")'放在代码里就行啦～
{
  "hello": "你好",
  "welcome": "欢迎来到我的应用"
}

};
const i18n = new VueI18n({
  locale:'en',
  fallbackLocale:'en',
  messages
});
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const messages = {
  en: require('./locales/en.json'),
  zh: require('./locales/zh.json')
}
const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
})
export default i18n

export default i18n;
看完这段话，你知道Vue和VueI18n咋回事儿么?简单说就是先装上VueI18n挂件，这样就能当咱们的兄弟。再搭一个 messages 包，放些要翻成中文的英文文本进去。然后就跟 VueI18n 交朋友，告诉它我们要啥默认语言和后向支持。之后，把 messages 交到它手里，搞定！最后把这个新朋友i18n放出来给大家用就行，在Vue组件里嗨皮起来！
使用多语言
直接点触vue组件中的多语言功能，就能轻松搞定。只要用$t()这个函数来替换关键词就成。
比如，在组件里头：
html

{{$t(‘hello’)}}

{{$t(‘welcome’)}}

哎呦，这个代码太神奇了，只要你输入${t(‘hello’)}或者${t(‘welcome’)},它就能立刻帮你把这些内容翻成另一种语言！

切换语言

你知道吗？Vue-i18n可不止是翻字那么简单，还能换语言！不信的话咱们就看看下面这个例子吧：

    
    
    
{{ $t('hello') }}
    {{ $t('welcome') }}