Laravel + Vuetifyは、国際化をサポートするようにvue-i18nを構成します

LaravelはVuetify、vue-i18nを統合します

序文

Vuetifyは見栄えの良いVue.jsUIフレームワークだと思いますが、Vuetifyの開発ドキュメントは基本的に英語です。英語のレベルが十分でないかどうかを理解するのは難しいです。国内の壁の理由と相まって、理解するのは難しいです。以下では、Element-UIコミュニティは中国で非常に活発ですが、価値は正義です[/手動で面白い]、VuetifyはBootstrapに最も似ており、応答とアニメーション効果が非常に美しく、試してみることにしました。水をかけ、ピットを踏んで、最終的に正常に統合します。次に、プロジェクト構造を共有します。

国際化

この前に、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: '你好'
};

リソース/ 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」が「hello」になります
ここに画像の説明を挿入