vue3.0配置vue-i18n
Posted 易函123
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3.0配置vue-i18n相关的知识,希望对你有一定的参考价值。
项目安装vue-i18n
需要安装最新版的vue-i18n
npm install vue-i18n@next --save
或者用yarn
yarn add vue-i18n@next --save
安装完成之后,可以看一下package.json文件;看是否是最新版的vue-i18n,我安装的是9.1.7。
在项目src文件夹中新建lang文件夹
新建lang文件夹,在lang文件夹中新建三个js文件:
zh-CN.js
module.exports = {
header:{
text:\'学习\'
}
}
zh-TW.js
module.exports = {
header:{
text:\'學習\'
}
}
index.js
import { createI18n } from \'vue-i18n\'
import zh_CN from \'./zh-CN\'
import zh_TW from \'./zh-TW\'
// 语言库
const messages = {
\'zh-CN\': zh_CN,
\'zh-TW\': zh_TW
}
// 默认语言
// const langDefault = \'zh-CN\'
const langDefault = \'zh-TW\'
const i18n = createI18n({
locale: langDefault, //默认显示的语言
messages
})
export default i18n; // 将i18n暴露出去,在main.js中引入挂载
将i18n暴露出去,在main.js中引入挂载
main.js
import i18n from \'./lang\'
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App); // 创建实例
app.use(i18n);
app.mount("#app");
页面中使用
在 html 模板中使用
template:
<div>{{$t(\'header.text\')}}</div>
在 js 中使用
js:
this.$t(\'header.text\')
vue3.0配置vue-i18n
以上是关于vue3.0配置vue-i18n的主要内容,如果未能解决你的问题,请参考以下文章