安装
// npm安装
npm install vue-i18n -S
使用
src下面新文件夹i18n/lang
lang文件夹下面新建两个文件分别为en.ts和zh.ts
// src/i18n/lang/en.ts
export default {
login: {
login: "login",
userName: "userName"
}
}
// src/i18n/lang/zh.ts
export default {
login: {
login: "登录",
userName: "用户名"
}
}
在lang文件夹下新建index.ts
// src/lang/index.ts
import { createI18n } from 'vue-i18n'
// 引入模块
import zh from './lang/zh'
import en from './lang/en'
const i18n = createI18n({
// 浏览器语言
locale: localStorage.getItem("lang") || "zh",
messages: {
zh, en
}
})
export default i18n;
在main.ts中引入
// main.ts
import { createApp } from 'vue';
import i18n from './i18n/index';
import App from './App.vue';
const app = createApp(App);
app.use(i18n);
app.mount('#app');
使用方式
中英切换方式1
<template>
<div>
<h2>{{ $t('login.login') }}</h2>
<button @click="chinese('zh')">中文</button>
<button @click="english('en')">英文</button>
</div>
</template>
<script setup lang="ts">
import i18n from './i18n'
// 点击切换中文、英文
const chinese = (lang: any) => {
i18n.global.locale = lang
localStorage.setItem("lang", lang)
}
const english = (lang: any) => {
i18n.global.locale = lang
localStorage.setItem("lang", lang)
}
</script>
中英切换方式2
<template>
<div>
<h2>{{ $t('login.login') }}</h2>
<button @click="chinese('zh')">中文</button>
<button @click="english('en')">英文</button>
</div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const chinese = (lang: any) => {
locale.value = lang
localStorage.setItem("lang", lang)
}
const english = (lang: any) => {
locale.value = lang
localStorage.setItem("lang", lang)
}
</script>
切记:使用第二种切换方式的时候要把legacy设置为false