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的主要内容,如果未能解决你的问题,请参考以下文章

vue-i18n语言文字不被打包

Vue中vue-i18n结合element-ui实现国际化

vue-i18n 初体验

iview国际化问题(iview官方提供的兼容vue-i18n@6.x+使用组件报错)

vue项目中使用vue-i18n国际化

前端使用vue-i18n做中英文翻译