專案安裝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