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