MENU

Vue.js + Vuex + vue-i18n 配置多语言环境

2018 年 11 月 30 日 • 碎碎念

大家好,今天教大家一道...

最近一直在研究Vue.js和Laravel,应该是最后一个PHP的项目了。然后就要去研究Ob-C或者Swift,老老实实去刷Leetcode了(毕竟再不刷算法就更闲鱼了)。
因为这个项目有i18n的要求,所以在设计前端架构的时候就必然要考虑国际化的问题。Vue.js作为三大主流的前端框架,有可供我们选择的依赖。然鹅,vue-i18n只提供了基本的多语言功能,具体的全局实现还是要依靠我们自己来完成的。
本方法不唯一且参考了网上的思路;当然网路上也有别的大佬提供了很多的解决方案。如有雷同,只是借鉴。

准备辅料

Vue.js, Vuex, vue-i18n, 大脑,鸡爪,小龙虾,牛油麻辣火锅….
Vuex是个好东西,只是理解起来有些费劲。如果你对Vuex一无所知,你应该先去看一哈官方文档。Vuex 是什么? | Vuex
同时,由于Vuex使用了ES2015语法,你还需要了解下ES6,点击涨姿势

为什么要用Vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
—— vuex.vuejs.org

说白了,就是一个池子里面放着所有组件都要用到的数据。
这个非常适合多语言的需求:

  1. Store储存仓所有数据均为响应式,意味着当数据更新时,所有相应组件都会更新。
  2. Vuex非常适合中大型单页应用。

安装依赖

项目官网以及安装方法:Vue I18n
在vue的入口文件中引入并注册全局:

import i18n from './i18n';
window.i18n = i18n;

和官方安装步骤中不同的是:Vue.use(Vuei18n)并不在入口文件内使用。

在注册完全局变量后,你可以在任何js內使用i18n依赖,而不需要再次引入。
当然,你还需要在初始化vue的位置加入i18n选项。

const app = new Vue({ i18n, router })

注意,本文不包括基本安装过程,且其他安装(Vuex等)不在此处赘述。

文件结构

public/js/
    ├─── i18n/
    │    ├── en-US.json
    │    ├── zh-CN.json
    │    └── index.js
resources/js/
    ├─── i18n/
    │    └── index.js
    └─── store/
        ├── index.js
        ├── mutation.js
        └── mutation-types.js

Vuex状态管理以及Mutation实现

Vuex

i18n作为单模块Vuex需求,只需要State, Action, Mutation即可。
首先,创建Vuex实例;在store/index.js中写入

...//省略引用等其他
Vue.use(Vuex)

export default new Vuex.Store({
    state,
    mutations,
    actions
})

Mutation Type

创建Mutation Type,在 store/mutation-types.js中写入

export const SET_LANG = 'SET_LANG';

Mutation, Action, State

以下代码均按序写入store/mutation.js
引入相关

import {app} from '../app';
import * as types from './mutation-types';
import axios from 'axios';

创建state

export conststate = {
    lang: 'en-US', //基础语言为en-US,国际通用(雾
};

创建mutations

export const mutations = {
    [types.SET_LANG] (state, payload) {
        app.$i18n.locale = payload;
    }
};

创建actions

export const actions = {
    setLang({commit}, payload) {
        commit(types.SET_LANG, payload);
    },

    async setLangNew({commit}, payload){
        window.localStorage.localeLanguage = payload;
        if (payload in app.$i18n.messages) {
            commit(types.SET_LANG, payload);
        } else {
            try {
                const res = await axios.get('../i18n/'+ payload +'.json');
                app.$i18n.setLocaleMessage(payload, res.data);
                commit(types.SET_LANG, payload);
            }
            catch(e) {
                console.log(e);
            }
        }
    }
};

i18n引入文件

为了保证文件结构的整洁,我在资源文件夹下创建了专用的i18n处理文件。在你的js中,写入:

import Vue from 'vue' //引入vue
import VueI18n from 'vue-i18n'; //引入vue-i18n
Vue.use(VueI18n); //使用vue-i18n

const DEFAULT_LANG = window.localStorage.localeLanguage === undefined ? navigator.language : window.localStorage.localeLanguage; //初始化默认语言

const locales = {
    'zh-CN': require('./zh-CN.json'),
    'en-US': require('./en-US.json'),
    'ja-JA': require('./ja-JA.json'),
}; //引入语言包

const i18n = new VueI18n({
    locale: DEFAULT_LANG,
    messages: locales,
}); //初始化i18n组件

export default i18n

语言包

xx-XX.json中,vue-i18n配置格式为:

{
    'pages':{
        'card-title-main': "This is the text.",
        ...
    },
    ...
}

对应的使用格式为:i18n.$t('pages.card-title-main');即可。

下面开始…技术总结

摸了,懒。

最后编辑于: 2019 年 02 月 07 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码