Laravel + Vuetify 配置 vue-i18n 支持国际化

绝地灬酷狼 2023-06-29 07:26 26阅读 0赞

### Laravel 整合 Vuetify 、 vue-i18n ###

*   *   *  前言
         *  Internationalization 国际化
         *   *  安装 Vuetify
             *  安装字体和图标
             *  app.js 引入并使用 Vuetify
             *  安装 vue-i18n
             *  使用 vue-i18n
             *  模板中使用 vue-i18n

### 前言 ###

我认为 Vuetify 是最好看的 Vue.js UI 框架，但是 Vuetify 开发文档基本都是英文，英语水平不够理解起来相当吃力，再加上国内墙的原因，出问题很难通过 Google 查找原因，相比之下 Element-UI 社区在国内就非常活跃，但是颜值即正义\[/手动滑稽\]，Vuetify 最像 Bootstrap，在响应式和动画特效上非常好看，决定试试水，踩踩坑，最终整合成功了，分享下项目结构。

### Internationalization 国际化 ###

在此之前，Laravel 、Vue 已经完成了初始化，目录结构如图所示：  
![在这里插入图片描述][20200111132900246.png]

#### 安装 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>

![在这里插入图片描述][2020011113515528.png]转换为中文显示：

给右上角第一个按钮元素绑定一个 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’ 就变成了 ‘你好’  
![在这里插入图片描述][20200111140235770.png]

[20200111132900246.png]: https://img-blog.csdnimg.cn/20200111132900246.png
[2020011113515528.png]: https://img-blog.csdnimg.cn/2020011113515528.png
[20200111140235770.png]: https://img-blog.csdnimg.cn/20200111140235770.png