vue支持多語言項目 vue-i18n


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'   
    },
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM