Laravel + Vuetify 配置 vue-i18n 支持國際化

前言

我認爲 Vuetify 是最好看的 Vue.js UI 框架，但是 Vuetify 開發文檔基本都是英文，英語水平不夠理解起來相當吃力，再加上國內牆的原因，出問題很難通過 Google 查找原因，相比之下 Element-UI 社區在國內就非常活躍，但是顏值即正義[/手動滑稽]，Vuetify 最像 Bootstrap，在響應式和動畫特效上非常好看，決定試試水，踩踩坑，最終整合成功了，分享下項目結構。

Internationalization 國際化

在此之前，Laravel 、Vue 已經完成了初始化，目錄結構如圖所示：

安裝 Vuetify

npm install --save vuetify

安裝字體和圖標

npm install material-design-icons-iconfont -D
npm install @mdi/font -D

app.js 引入並使用 Vuetify

// 引入vuetify
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify);

new Vue({
    //定義Vue綁定的根元素
    el: '#app',
    router,
    store,
    //初始化Vuetify
    vuetify: new Vuetify()
}).$mount('#app'); //將這個實例掛載到 id=app 的根元素上

安裝 vue-i18n

npm install vue-i18n

使用 vue-i18n

新建插件目錄

mkdir -p resources/js/plugins/
# 新建 vue-i18n 插件
touch resources/js/plugins/vue-i18n.js

編輯vue-i18n.js，導出 i18n 模塊

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
//定義標識符
const i18n = new VueI18n({
    locale: 'en-US',    // 語言標識
    //this.$i18n.locale // 通過切換locale的值來實現語言切換
    messages: {
        'zh-CN': require('../common/lang/cn'),   // 中文語言包
        'en-US': require('../common/lang/en')    // 英文語言包
    }
});
export {i18n}

新建語言包目錄

mkdir -p resources/js/common/lang
touch resources/js/common/lang/en.js
touch resources/js/common/lang/cn.js

編輯語言包

resources/js/common/lang/cn.js

export const m ={
    hello: '你好'
};

resources/js/common/lang/en.js

export const m ={
    hello: 'hello'
};

app.js 引入並使用 vue-i18n，最終配置如下

import Vue from 'vue';
import router from './routes.js'
import store from './store.js'
// 引入vuetify
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'
import  {i18n} from  './plugins/vue-i18n'

Vue.use(Vuetify);

new Vue({
    //定義Vue綁定的根元素
    el: '#app',
    //將上面聲明的路由器傳遞到根Vue實例
    router,
    store,
    i18n,
    //初始化Vuetify
    vuetify: new Vuetify()
}).$mount('#app'); //將這個實例掛載到id=app的根元素上

模板中使用 vue-i18n

英文語言顯示：

<template v-slot:activator="{ on }">
	{$t('m.hello')}}
</template>

轉換爲中文顯示：

給右上角第一個按鈕元素綁定一個 changeLang 方法：

 <v-btn icon
	@click="changeLang"
>
	<v-icon>mdi-apps</v-icon>
</v-btn>

新增 changeLang 方法：

methods:{
	changeLang(){
		this.$i18n.locale = 'zh-CN'
	}
}

npm run dev，刷新頁面顯示 ‘hello’ ，點擊我們綁定的元素後 ‘hello’ 就變成了 ‘你好’