关于vue.js:vue30配置vuei18n

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