Vue2 配置多语言

Vue2 配置多语言

---

---

一、创建 lang文件夹

引入依赖文件

npm install vue-i18n -save

二、配置 main.js

main.js中加入依赖

import i18n from './lang'

在注册Element时设置i18n的处理方法

Vue.use(ElementUI,{
  i18n: (key, value) => i18n.t(key, value)// 在注册Element时设置i18n的处理方法
})

注册到 vue组件中

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

三、创建 lang文件夹

在 src 中创建lang文件夹，接着在lang文件夹中创建 en.js 、 zh.js 、index.js 文件

en,js

export default {
    message:{
        acount: 'Acount',
        password: 'Password'
 
    },
    login: { // 登录模块
        title: 'Unimatter Login',
        username: 'username',
        userNamePlaceholder:'Please enter the user name',
        password: 'passward',
        passwordPlaceholder:'Please enter your password',
        logIn: 'login',
    },
}

zh.js

export default {
    message: {
        acount: '账号',
        password: '密码'

    },

    login: { // 登录模块
        title: '登录',
        username: '用户名',
        userNamePlaceholder:'请输入用户名',
        password: '密码',
        passwordPlaceholder:'请输入您的密码',
        logIn: '登录',
    },
}

index.js 直接复制即可

 
import Vue from 'vue' //引入vue
import VueI18n from 'vue-i18n'  //引入vue的国际化插件
import Cookies from 'js-cookie' //我这里需要，所以引入轻量级的处理cookies的js
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import zhLocale from './zh'     //本地创建的中文环境配置文件
import enLocale from './en'     //本地创建的英文环境配置文件
 
Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件
 
const messages = {
    en: {
        ...enLocale,
        ...elementEnLocale
    },
    zh: {
        ...zhLocale,
        ...elementZhLocale
    }
}
//获取当前语言环境，通过后台返回的语言或者浏览器语言环境
export function getLanguage() {
    const chooseLanguage = Cookies.get('language')//取后台设置的语言
    if (chooseLanguage) return chooseLanguage
    //如果后台没有返回语言则根据浏览器的语言环境返回语言变量
    const language = (navigator.language || navigator.browserLanguage).toLowerCase()
    const locales = Object.keys(messages)//获取前端设置的所有语言
    //遍历所有语言值组成的数组，匹配前端设置的语言能匹配到就返回改语言值
    for (const locale of locales) {
        if (language.indexOf(locale) > -1) {
            return locale
        }
    }
    //如果都没匹配到就直接返回英文
    return 'en'
}
const i18n = new VueI18n({
    //语言标识 this.$i18n.locale 通过切换locale的值来实现语言切换
    //如：this.$i18n.locale='en' 直接切换成英文，仅限于配置了语言的一些变量
    locale: getLanguage(),//调的上边这个函数
    messages              //上边配置的语言标识对应的不同配置
})
 
export default i18n
 

四、配置 store 文件

在store.modules.app.js 文件中加入以下代码，如果没有给文件可以自己创建

const state = {
  sidebar: {
    language: Cookies.get('language') || 'zh'
  },
  device: 'desktop'
}

const mutations = {
  SET_LANGUAGE: (state, language) => {
    state.language = language
    Cookies.set('language', language)
  }
}

const actions = {
  setLanguage({ commit }, language) {
    commit('SET_LANGUAGE', language)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

五 创建切换中英文组件

在components 中创建 langSelect文件夹，在创建 index.vue组件 代码直接复制即可

<template>
    <el-dropdown trigger="click"  @command="handleSetLanguage">
        <div class="select-language"><img src="@/assets/404_images/lang.png" alt=""></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.state.app.language
      }
    },
    mounted(){
        // console.log('000',this.$store.state.app.language)
    },
    methods: {
      handleSetLanguage(lang) {
        console.log("lang",lang)
        this.$i18n.locale = lang

        this.$store.dispatch('app/setLanguage', lang)

        this.$message({
          message: 'Switch Language Success',
          type: 'success'
        })
      }
    }
}
</script>
<style>
.select-language img {
    height: 30px;
}
</style>

注意 这段代码中存在 img标签，src地址注意修改为自己项目中的图片地址

使用 示例

1. 将交换中英文按钮组件插入到代码中

<lang-select class="set-language " />

2. 示例在 登录页面使用 这段代码看看就可以，里面有多语言具体的使用方式，下面也会详细指出来

<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
      <div class="title-container">
        <h3 class="title">{{ $t("login.title") }}</h3>
      </div>
      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          ref="username"
          v-model="loginForm.username"
          :placeholder="$t(`login.userNamePlaceholder`)"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          :placeholder="$t(`login.passwordPlaceholder`)"
          name="password"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>

      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t("login.logIn") }}</el-button>

    </el-form>
  </div>
</template>

双花括号显示： login 时 zh.js或者 en.js 中的对象，title为对象中的属性，下同

{{ $t("login.title") }}

组件 中的 lable 以及 placeholder 属性使用,其实是使用 v-bind,缩写为 ’ ：‘

    <el-form-item :label="$t('documentList.selectDocument')">
      <el-select
        v-model="selectfrom.typeId"
        :placeholder="$t('documentList.typeId')"
        clearable
      >
      </el-select>
    </el-form-item>

总结

自己总有一天会忘，那就记下来吧，如果有幸能帮到别人，那就更好。如果有哪里错误，希望大家指出，我可不想误导别人。

参考地址 [https://blog.csdn.net/weixin_51220466/article/details/123889240?ops_request_misc=&request_id=&biz_id=102&utm_term=vue 配置多语言&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-3-123889240.142^v94^insert_down28v1&spm=1018.2226.3001.4187