vue-elemnet 前端国际化流程

Posted 2021-03-29 mall商城开源平台

魔金多商户商城
源码下载 https://gitee.com/JiaGou-XiaoGe/payshop
https://mojin.51wangshi.com/store  商户管理 admin1 admin123
平台h5 https://mojin.51wangshi.com  13146587711 123456
https://mojin.51wangshi.com/admin  平台管理 admin2 admin123

前端国际化流程

1、package.json中dependencies节点添加vue-i18n "vue-i18n": "7.3.2",

2、src目录下创建lang目录，存放国际化文件
此处包含三个文件，分别是 index.js zh.js en.js

// index.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'import Cookies from 'js-cookie'import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui langimport elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui langimport enLocale from './en'import zhLocale from './zh'
Vue.use(VueI18n)
const messages = { en: { ...enLocale, ...elementEnLocale }, zh: { ...zhLocale, ...elementZhLocale }}
const i18n = new VueI18n({ // 设置语言 选项 en | zh locale: Cookies.get('language') || 'en', // 设置文本内容 messages})
export default i18n

// zh.jsexport default { login: { title: '若依后台管理系统', logIn: '登录', username: '账号', password: '密码' }, tagsView: { refresh: '刷新', close: '关闭', closeOthers: '关闭其它', closeAll: '关闭所有' }, settings: { title: '系统布局配置', theme: '主题色', tagsView: '开启 Tags-View', fixedHeader: '固定 Header', sidebarLogo: '侧边栏 Logo' }}

// en.jsexport default { login: { title: 'RuoYi Login Form', logIn: 'Log in', username: 'Username', password: 'Password' }, tagsView: { refresh: 'Refresh', close: 'Close', closeOthers: 'Close Others', closeAll: 'Close All' }, settings: { title: 'Page style setting', theme: 'Theme Color', tagsView: 'Open Tags-View', fixedHeader: 'Fixed Header', sidebarLogo: 'Sidebar Logo' }}

3、在src/main.js中增量添加i18n

import i18n from './lang'
// use添加i18nVue.use(Element, { i18n: (key, value) => i18n.t(key, value)})
new Vue({ i18n,})

4、在src/store/getters.js中添加language

language: state => state.app.language,

5、在src/store/modules/app.js中增量添加i18n

const state = { language: Cookies.get('language') || 'en'}
const mutations = { SET_LANGUAGE: (state, language) => { state.language = language Cookies.set('language', language) }}
const actions = { setLanguage({ commit }, language) { commit('SET_LANGUAGE', language) }}

6、在src/components/LangSelect/index.vue中创建汉化组件

<template> <el-dropdown trigger="click" class="international" @command="handleSetLanguage"> <div> <svg-icon class-name="international-icon" icon-class="language" /> </div> <el-dropdown-menu slot="dropdown"> <el-dropdown-item :disabled="language==='zh'" command="zh"> 中文 </el-dropdown-item> <el-dropdown-item :disabled="language==='en'" command="en"> English </el-dropdown-item> </el-dropdown-menu> </el-dropdown></template>
<script>export default { computed: { language() { return this.$store.getters.language } }, methods: { handleSetLanguage(lang) { this.$i18n.locale = lang this.$store.dispatch('app/setLanguage', lang) this.$message({ message: '设置语言成功', type: 'success' }) } }}</script>

7、登录页面汉化

<template> <div class="login"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <h3 class="title">{{ $t('login.title') }}</h3> <lang-select class="set-language" /> <el-form-item prop="username"> <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.username')"> <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> </el-input> </el-form-item> <el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" auto-complete="off" :placeholder="$t('login.password')" @keyup.enter.native="handleLogin" > <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> </el-input> </el-form-item> <el-form-item prop="code"> <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin" > <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> </el-input> <div class="login-code"> <img :src="codeUrl" @click="getCode" /> </div> </el-form-item> <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> <el-form-item style="width:100%;"> <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin" > <span v-if="!loading">{{ $t('login.logIn') }}</span> <span v-else>登 录 中...</span> </el-button> </el-form-item> </el-form> <!-- 底部 --> <div class="el-login-footer"> <span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span> </div> </div></template>
<script>