现在的软件特别厉害，啥都有，但有时候却只支持一种语言，这对于咱们这些来自不同地方的朋友来说可就有点不方便！那今天就给大家说说怎么用Vue3+TS+Vite这个高级的前端开发套件搞定国际化。我会告诉你个好用的方法，还会给你讲实际操作的例子，保证你一看就懂！

选择合适的国际化方案

咱们要搞个Vue3+TS+Vite搭的网站，国际化一定不能落下。听说vue-i18n特别给力，用起来也简单，API好上手。那今天就来教你如何用vue-i18n搞定国际化！

安装和配置vue-i18n

首先你先把vue-i18n这个小插件用npm或yarn装上。然后，在`main.ts`里导入并用起来就成了。说白了，咱们只需要搞个i18n对象，传给`createApp`函数，这样全应用就能搞定翻译！

配置语言文件

下一步，我们就得搞几个“本地化”的文档档。每个文件就是个Javascript对象，里面全是英文和中文的对照，好让你记得住那些经常用的话。比如说，我们整简体中文的那啥文件（比如打个zh-CN）的时候，首先得把那些常见的词翻出来才行。

npm install vue-i18n

使用国际化文本

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'
import messages from './locales'
const i18n = createI18n({
  locale: 'zh-CN', // 默认语言
  messages,
})
createApp(App).use(i18n).mount('#app')

别担心！Vue组件里面有个超好用的$t函数，帮你快速定位翻译目标。简单地在模板里插入{{$t(‘翻译文本’)}}或者手写代码this.$t(‘翻译文本’)，就可以随意切换到不同语言！

实现语言切换

这个locale属性就是我们的语言换挡器。改个数字，立马能看别的语言页面了！想用啥语种都行，真的超简单！

优化国际化支持

├── locales
│   ├── en-US.js
│   └── zh-CN.js
├── App.vue
└── main.ts

除了基本功能外，咱们是不是也该想想怎么提高国际范儿？比如说，咱可以把公共部分拿来，做个全世界通用的翻译。然后，用户浏览器啥语种，页面就自动转成对应的显示模式，这样用起来肯定舒服多！

结合TypeScript进行类型检查

export default {
  welcome: '欢迎使用Vue国际化示例',
  greeting: '你好，{name}',
}

用Vue3+TS+Vite做项目？那就要充分利用TypeScript的类型检查功能！设置好类型接口和别名，写起来更放心，代码也更好看。

适配不同平台和设备

记住每种平台和设备上显示的国际版可能都不一样！在做网页设计和样式时，别忘了要是多语言的话，文字会不会显得太满或者排版混乱？提前想个好方法应对！

测试与优化

  

    
{{ $t('welcome') }}
    
{{ $t('greeting', { name: '张三' }) }}
  


export default {
  mounted() {
    console.log(this.$t('welcome'))
    console.log(this.$t('greeting', { name: '李四' }))
  },
}

做完全球化设置后，别忘了给它来个全身检查，看看每个语言版本是不是都对劲儿，字幕里有没有错别字。有问题就得马上修好！这样咱们的全球化功能才能稳定运行

看这篇文章看完，你会知道怎么用Vue3+TS+Vite搞国际化了吗？挑一种方法，赶紧动手干活，最后别忘了测试调试。照着这个流程走下去，你就可以轻松掌握国际化的技巧，以后做项目也能用得上！

  

    

      中文
      English
    
    
{{ $t('welcome') }}
    
{{ $t('greeting', { name: '张三' }) }}
  


export default {
  methods: {
    changeLang(lang) {
      this.$i18n.locale = lang
    },
  },
}