vite+vue-ts 如何在项目中实现多语言

BoredWait2025-06-22 14:37

安装插件:pnpm add vue-i18n @intlify/unplugin-vue-i18n

配置vite

ts 复制代码

// vite.config.ts
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
export default defineConfig({
...
  plugins: [
  ...
  VueI18nPlugin({
      include: [resolve(__dirname, './src/locales/**')],
    }),
  ]
})

创建文件

目录结构复制代码

src/
├── locales/
│   ├── en.json
│   ├── zh.json

添加en.json数据

json 复制代码

 
{
    "language": "English",
    "lang": {
        "zh-CN": "Chinese",
        "en-US": "English"
    },
    "home": {
        "welcome": "welcome",
        "loading": "loading..."
    }
}

添加zh.json数据

json 复制代码

{
    "language": "中文",
    "lang": {
        "zh-CN": "中文",
        "en-US": "英文"
    },
    "home": {
        "welcome": "欢迎使用",
        "loading": "加载中..."
    }
}

将数据加载到项目中

ts 复制代码

// main.ts
import { createI18n } from 'vue-i18n'
import messages from '@intlify/unplugin-vue-i18n/messages'

const locale = localStorage.getItem("i18n-locale") || 'zh-CN'
const i18n = createI18n({
  locale: locale,
  fallbackLocale: 'en-US',
  messages: messages
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

实现多语言切换案例：

vue 复制代码

<template>
    <el-dropdown placement="bottom" style="margin-right: 20px;cursor: pointer;" @command="selectLang">
        <span>语言（{{ t('language') }}）</span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="zh-CN">中文</el-dropdown-item>
                <el-dropdown-item command="en-US">English</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
const selectLang = (lang: string) => {
    locale.value = lang
    localStorage.setItem('i18n-locale', lang)
}
</script>
<style scoped></style>

实现方式很简单，目前还没有发现缺陷，有更好的方案请求大家多多指导