VUE3多国语言切换（国际化）

柳鲲鹏2025-04-21 19:48

安装

用npm安装（推荐）

npm install vue-i18n@9

用yarn安装

yarn add vue-i18n@9
参考

其中有些错误。

Vue3国际化全攻略：从安装到多语言切换，让你的应用秒变国际范！_vue3 国际化-CSDN博客

相关文件

src/i18n/locale/en.json

复制代码

{
	"i18n.password": "password",
}

src/i18n/locale/zh.json

复制代码

{
	"i18n.password": "密码",
}

src/i18n/index.ts

复制代码

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

const messages = {
    'en' : en,
    'zh' : zh,
}

// 导出语言选项（用于下拉菜单）
export const LANGUAGE_OPTIONS = [
  { label: '中文',    value: 'zh' },
  { label: 'English', value: 'en' }
]

export const DEFAULT_LANGUAGE   = 'zh';
export const SAVED_LANGUAGE_KEY = 'selected_language';

export const SAVED_LANGUAGE = (localStorage.getItem(SAVED_LANGUAGE_KEY) || navigator.language.split('-')[0] || DEFAULT_LANGUAGE);

const i18n = createI18n({
    locale: SAVED_LANGUAGE,
    fallbackLocale: DEFAULT_LANGUAGE, // 设置备用语言
    messages,
    legacy: false
})

export default i18n

main.ts

复制代码

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

const app = createApp(App)

app
  .use(i18n)
  .mount('#app')

登录界面前部分
<template>

<j-form-item :label="$t('i18n.password')" name="password" >
<j-input-password :maxlength="64" >
</j-input-password>
</j-form-item>
<j-form-item> <select v-model="currentLang" @change="changeLangEvent"> <option v-for="lang in LANGUAGE_OPTIONS" :value="lang.value" > {{ lang.label }} </option> </select> </j-form-item>
</template>
登录界面后部分

import { useI18n } from 'vue-i18n';
import { SAVED_LANGUAGE, SAVED_LANGUAGE_KEY, LANGUAGE_OPTIONS } from '@/i18n/index'

const { locale } = useI18n();
const currentLang = SAVED_LANGUAGE;

const changeLangEvent = (event) => {
locale.value = event.target.value;
localStorage.setItem(SAVED_LANGUAGE_KEY, locale.value);
};

至此，可以点击下拉框切换了。

VUE3多国语言切换（国际化）

用npm安装（推荐）

用yarn安装