Vue3+TS+Vite开发技巧：如何进行国际化支持

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')

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

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

<template>  <div>    <h1>{{ $t('welcome') }}</h1>    <p>{{ $t('greeting', { name: '张三' }) }}</p>  </div></template><script>export default {  mounted() {    console.log(this.$t('welcome'))    console.log(this.$t('greeting', { name: '李四' }))  },}</script>

<template>  <div>    <div>      <button @click="changeLang('zh-CN')">中文</button>      <button @click="changeLang('en-US')">English</button>    </div>    <h1>{{ $t('welcome') }}</h1>    <p>{{ $t('greeting', { name: '张三' }) }}</p>  </div></template><script>export default {  methods: {    changeLang(lang) {      this.$i18n.locale = lang    },  },}</script>