多语言配置
有时候我们在开发中需要配置多语言，在vue项目中最常用的就是vue-i18n这个插件。
vue-i18n
-
安装
npm install vue-i18n@next
-
设置语言包 在src目录下创建language文件夹，下面放这语言文件：
└─src
└─language
├─zh.js // 中文语言包
├─en.js // 英文语言包
└─index.js // 配置文件
-
翻译文件
中文zh.js
export default {
test: {
hello: '你好'
}
}
英文en.js
export default {
test: {
hello: 'hello'
}
}
-
在 index.js中配置
import { createI18n } from 'vue-i18n'
import zh from './zh.js'
import en from './en.js'
const i18n = createI18n({
// 默认语言
locale: 'zh',
messages: {
zh,
en,
},
})
export default i18n
-
在 main.js中引入插件
import i18n from "./language/index.js";
const app = createApp(App)
app.use(i18n)
app.mount('#app')
-
在页面使用和切换
<template>
<div class="m-t-15">
<p>{{$t('test.hello')}}</p>
<ga-button type="info" @click="changeLang('en')">切换英文</ga-button>
<ga-button type="info" @click="changeLang('zh')">切换中文</ga-button>
</div>
</template>
<script setup>
import i18n from "@/language/index.js";
const changeLang = (type) => {
i18n.global.locale = type
}
</script>
查看更多相关文章请关注公众号：大前端编程教学
原文始发于微信公众号（大前端编程教学）：Vue3多语言配置vue-i18n
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/224232.html
