我的项目装置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