Vue I18n 是 Vue.js 的國際化插件,可以輕松地將一些本地化功能集成到 Vue.js 應用程序中。
此篇文章主要了解:國際化多語言
首先,vue-i18n作為依賴安裝
npm install vue-i18n // NPM安裝 yarn add vue-i18n // yarn安裝
在入口文件main.js中,引用vue-i18n並配置內容
// 引入依賴模塊 import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n)
import zhLocale from './zh' // 語言包文件 // 配置語言內容 const messages = { en: { title: 'hello China', // ...enLocale, // 引入英文語言包,避免內容過長,代碼整潔 }, zh: { title: '你好 中國' // ...zhLocale, // 引入中文語言包,代替上一行內容列舉,代碼整潔 } } // 使用語言包 const i18n = new VueI18n({ locale: 'zh', // locale: VueCookie.get('language') || 'zh', // 使用vueCookie動態切換語言環境,默認中文 messages })
// 掛在全局使用語言
new Vue({
el: '#app',
i18n,
store,
router,
render: h => h(App)
})
// 模板內使用
<template>
<div>{{$t(about.title)}}</div> // $t()語法
</template>
// 語言包文件語法 zhLocale
module.exports = { about: { ttitle: '了解一下 i18n' }, }