一、Vue国际化处理 vue-i18n

1,910 阅读1分钟

1、 vue3.0中英切换使用步骤

1.1 在项目根目录下:(如:minfneg_projects)

    npm install --save vue-i18

1.2 创建文件夹i18n:(如图)

1.3 en.js文件内容:

module.exports = {
    headDrop: {
        login: 'Login',
        changepassword: 'changePassword',
        dropout: "dropOut",
        welcome: "Welcome",
        switchZhOrEn: "Chinese-English switch"
    },
}

1.4 zh.js文件内容:

module.exports = {
    headDrop: {
        login: '登录',
        changepassword: '修改密码',
        dropout: "退出",
        welcome: "欢迎您",
        switchZhOrEn: "中英切换"
    }
}

1.5 cookie.js文件内容

function getCookie(name, defaultValue) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return defaultValue;
}
export {
    getCookie
}

1.6 index.js文件内容

import VueI18n from 'vue-i18n'
import Vue from 'vue'
import {
    getCookie
} from "./cookie"
Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: getCookie('language', 'zh'), // 语言标识
    messages: {
        'zh': require('./lang/zh'),
        'en': require('./lang/en')
    }
})

export default i18n

1.7 main.js中引入并使用:

import store from './store'
import i18n from "./i18n"
new Vue({
router,
store,
i18n,
render: function (h) {
    return h(App)
},
mounted() {
    document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')

2、使用vuex进行状态管理

2.1 我创建的文件目录结构如图:

2.2 app.js文件内容

import Cookies from 'js-cookie' //先下载:npm install js-cookie
const app = {
    state: {
        // 中英文
        language: Cookies.get('language') || 'zh',
    },
    mutations: {
        // 中英文
        SET_LANGUAGE: (state, language) => {
          state.language = language
          Cookies.set('language', language)
        },
    },
    actions: {
        // 中英文
        setLanguage({ commit }, language) {
          commit('SET_LANGUAGE', language)
        },
    }
}
export default app

2.3 index.js文件内容(此文件须在main.js中引入并使用)

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'

Vue.use(Vuex)

const store = new Vuex.Store({
  getters,
  modules: {
    app
  }
})

export default store

3、应用(headDrop.vue文件下)

<template>
    <el-dropdown
      @command="handleSetLanguage"
      trigger="click"
      style="padding-left:10px;cursor: pointer;"
    >
      <span class="el-dropdown-link">
        {{$t("headDrop.switchZhOrEn")}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
        <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
</template>

export default {
    data(){
        return {}
    },
    computed: {
        language() {
          return this.$store.state.app.language;
        }
    },
    methods: {
        // 中英文切换
        handleSetLanguage(lang) {
          this.$i18n.locale = lang;
          this.$store.dispatch("setLanguage", lang);
          this.$message({
            message: "switch language success",
            type: "success"
          });
        },
    }
}

4、最终效果图