vue3：国际化开发

框架：vite+vue3+ts

国际化插件：vue-i18n

安装：npm i vue-i18n --save

配置：

1. 在src目录下新建文件夹：/lang
2. lang目录下新建文件: /zh/index.ts 、/en/index.ts，分别表示中文、英文，内容如下（结构都一样）：

export default {
  web:{ 
    title: '我是标题 {name}', // name是传参
    message: '你好啊'
  }
}

3. lang目录下新建index.ts，将/zh/index.ts 、/en/index.ts文件引入：

import { createI18n } from 'vue-i18n'
import en from './en/index'
import zh from './zh/index'

export default createI18n({
  locale: 'zh', // 默认语言，持久化的话可以使用cookie，storage方法缓存语言标识
  messages: {
    zh,
    en
  }
})

4. main.ts引入：

import { createApp } from 'vue'
import i18n from './lang/index'
const app = createApp(App)
app.use(i18n)

vue文件中使用：

<template>
<div class="dom">
  {{ t("web.title",{name:'112233'}) }}
  <van-button @click="change">切换</van-button>
</div>
</template>

<script setup lang="ts" name="home">
const { t } = useI18n()
const {proxy} = getCurrentInstance() as any
console.log(t("web.title",{name:'112233'}))
const change = () => {
  proxy.$i18n.locale = proxy.$i18n.locale === 'zh' ? 'en' : 'zh'
}
</script>

个人觉得这个语言文件最好是可以在后台配置生成，或者一个cdn地址的文件，这样在后续的相关修改就无需前端打包发版，且减少打包大小，也是性能优化的一个方面，相关的技术可参考官网：延迟加载翻译