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’ 就变成了 ‘你好’