Vue+ElementUI多语言设置

怡呀呀

已于 2022-09-15 11:03:25 修改

阅读量3.1k

点赞数 2

于 2022-09-15 10:38:36 首次发布

本文链接：https://blog.csdn.net/cnfabu/article/details/126856366

版权

组件使用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

介绍：Vue I18n 是 Vue.js 的国际化插件，可参考官网https://kazupon.github.io/vue-i18n/zh/

项目中使用到element组件，官网上有涉及到组件的国际化内容，同时兼容`vue-i18n。可参考官网`Element - The world's most popular Vue UI framework

以下为多语言设置基础步骤，详细代码见下方（可复制），本文以切中文，英文，日文三中语言的切换

步骤一、安装vue-i18n(vue2x的版本，一定要安装8.9.0以下的版本)

npm install vue-i18n@8.9.0 --save

步骤二、在src中，新建lang文件

index.js（用于配置i18n）

en_us.js（英文文件）

zh_cn.js（中文文件）

ja.js(日文文件)

1.index.js

2.zh_cn.js（中文文件）

3.en_us.js（英文文件）

4. ja.js(日文文件)

步骤三、在main.js文件中引入

步骤四、数据渲染模板的三种语法

// 语法1
<div>{{$t('message.zh')}}</div>
// 语法2
<input :placeholder="$t('message.zh')"></input>
// 语法3
data:{  msg:this.$t('message.zh')}

参考代码

// lang文件夹下index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import jaLocale from 'element-ui/lib/locale/lang/ja'
import en from './en_us' //英文
import zh from './zh_cn' //中文
import ja from './ja'  //日文
Vue.use(VueI18n)

const messages = {
    zh: {
        language: '简体中文',
        ...zh,
        ...zhLocale
    },
    en: {
        language: 'English',
        ...en,
        ...enLocale
    },
    ja: {
        language: 'ja',
        ...ja,
        ...jaLocale
    }
}
const i18n = new VueI18n({
    locale: localStorage.getItem('locale') || 'zh', // 语言类型存储到localstorage里
    messages
})
// 导出messages 给切换语言的时候用
export { i18n, messages }

// zh_cn.js中文文件
export default {
    test: 'Test',
    concent: {
        title: '天津天堰科技股份有限公司（以下简称：天堰公司）在此特别提醒用户认真阅读本《软件许可及服务协议》 (下称《协议》)中各条款，包括免除或者限制天堰公司责任的免责条款及对用户的权利限制条款。请用户审阅并接受或不接受本《协议》（未成年人应在法定监护人陪同下审阅）。除非用户接受本《协议》条款，否则用户无权下载、安装或使用本软件及其相关服务。用户的安装使用行为将视为对本《协议》全部条款的接受，并同意接受本《协议》各项条款的约束。\n' +
            '本《协议》是用户与天堰公司及其运营合作单位("合作单位")之间关于用户下载、安装、使用天堰公司软件所订立(以下简称"软件")。本《协议》描述天堰公司与用户之间关于"软件"许可使用及相关方面的权利义务。"用户"是指通过天堰公司提供的获取软件授权的途径获得软件授权许可和/或软件产品的自然人或组织。\n' +
            ' 本协议可视为《天堰公司网站服务条款》《免责声明》的补充条款，与其构成统一整体，您对本协议的接受即受全部条款的约束，包括接受天堰公司对服务条款随时所做的任何修改，这些条款可由天堰公司随时更新，且毋须另行通知。您在使用本软件的同时即是对所有条款的接受和遵守。'
    },
    xuanxiang: [
        { value: '选项1',label: '选项1'},
        { value: '选项2',label: '选项2'},
        { value: '选项3',label: '选项3'}
    ],
    table:{
      date:'日期',
      name:'姓名',
      address:'地址',
    },
    tableData:[{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
    }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
    }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
    }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
    }]
}

// en_us.js英文文件
export default {
    test: '测试',
    concent: {
        title: 'Tianjin Tianyan Technology Co., Ltd. (hereinafter referred to as Tianyan company) hereby specially reminds users to carefully read the terms of the software license and service agreement (hereinafter referred to as the agreement), including the exemption clauses for exempting or limiting the liability of Tianyan company and the rights restriction clauses for users. Users are invited to review and accept or not accept this Agreement (minors should be accompanied by legal guardians for review). Unless the user accepts the terms of this agreement, the user has no right to download, install or use the software and its related services. The user\'s installation and use will be deemed as acceptance of all the terms of this Agreement and agree to be bound by all the terms of this agreement.\n' +
            '\n' +
            'This agreement is concluded between the user and Tianyan company and its operation cooperation unit ("cooperation unit") regarding the downloading, installation and use of Tianyan company\'s software by the user (hereinafter referred to as "software"). This agreement describes the rights and obligations between Tianyan company and the user regarding the licensed use of the software and related aspects. "User" refers to the natural person or organization that obtains the software license and / or software products through the way of obtaining software license provided by Tianyan company.\n' +
            '\n' +
            'This agreement can be regarded as a supplement to the terms of service of Tianyan company\'s website and the disclaimer, which form a unified whole. Your acceptance of this agreement is bound by all terms, including any modification made by Tianyan company to the terms of service from time to time. These terms can be updated by Tianyan company from time to time without further notice. When you use this software, you accept and abide by all terms.'
    },
    xuanxiang: [
        {value: 'option1',label: 'option1'},
        {value: 'option2',label: 'option2'},
        {value: 'option3',label: 'option3'}
    ],
    table:{
        date:'date',
        name:'name',
        address:'address',
    },
    tableData:[{
        date: '2016-05-02',
        name: 'wangxiaohu',
        address: 'Jinshajiang Road, Putuo District, Shanghai'
    }, {
        date: '2016-05-04',
        name: 'wangxiaohu',
        address: 'Jinshajiang Road, Putuo District, Shanghai'
    }, {
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'Jinshajiang Road, Putuo District, Shanghai'
    }, {
        date: '2016-05-03',
        name: 'wangxiaohu',
        address: 'Jinshajiang Road, Putuo District, Shanghai'
    }]
}

// ja.js日文文件
export default {
    test: 'Test',
    concent: {
        title: '天津天堰科技株式会社（以下：天堰公司）はここで、天堰公司の責任を免除または制限する免責条項とユーザーに対する権利制限条項を含む本「ソフトウェア許可およびサービス協定」（以下「協定」）の各条項を真剣に読むようユーザーに注意した。ユーザーに本契約書をレビューして承認してもらうか、受け取らないようにしてください（未成年者は法定保護者に付き添われて確認してください）。ユーザーは、本契約の条項を受け入れない限り、ソフトウェアとその関連サービスをダウンロード、インストール、または使用する権利はありません。ユーザーのインストール使用行為は、本契約のすべての条項の受け入れとみなされ、本契約の各条項の制約を受け入れることに同意します。\n' +

            '本契約書は、ユーザーと天堰会社及びその運営協力会社（「協力会社」）との間でユーザーが天堰会社のソフトウェアをダウンロード、インストール、使用することについて締結したもの（以下「ソフトウェア」と略称する）である。本契約書は、天堰会社とユーザーの間の「ソフトウェア」の使用許可及び関連する権利義務について説明する。「ユーザー」とは、天堰会社が提供するソフトウェアライセンス取得のルートを通じてソフトウェアライセンスおよび/またはソフトウェア製品を取得する自然人または組織を指す。\n' +

            '本契約は、天堰公司ウェブサイトサービス約款の「免責声明」の補足条項とみなされ、統一された全体を構成するものであり、天堰公司がサービス約款に対していつでも行っている変更を受け入れることを含む、本契約の受け入れは、天堰公司が随時更新することができ、別途通知する必要はありません。お客様は、本ソフトウェアを使用している間に、すべての条項を受け入れ、遵守しています'
    },
    xuanxiang: [
        {value: 'オプション1', label: 'オプション1'},
        { value: 'オプション2',label: 'オプション2'},
        {value: 'オプション3',label: 'オプション3'}
    ],
    table:{
        date:'日付',
        name:'名前',
        address:'アドレス',
    },
    tableData:[{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
    }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
    }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
    }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
    }]
}

// main.js引入
import Vue from 'vue'
import App from './App.vue'
import { i18n } from './lang'
import 'element-ui/lib/theme-chalk/index.css'
import Element from 'element-ui'
import router from './router'
Vue.config.productionTip = false
Vue.prototype.Base64 = require('js-base64').Base64
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value), // 这里会根据选的语言切换Element-ui的语言
})
new Vue({
  el: '#app',
  router,
  i18n,
  render: h => h(App),
}).$mount('#app')

// 页面引入，查看含有$t的写法
<template>
  <div class="box">
<!--选择切换语言-->
    <el-select v-model="value" placeholder="请选择" @change="select">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <div>{{$t('concent.title')}}</div>
    <el-date-picker
        type="date"
        placeholder="选择日期">
    </el-date-picker>
    <el-select placeholder="请选择" v-model="selectvue">
      <el-option
          v-for="item in $t('xuanxiang')"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-table
        :data="$t('tableData')"
        style="width: 100%">
      <el-table-column
          prop="date"
          :label="$t('table.date')"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          :label="$t('table.name')"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          :label="$t('table.address')">
      </el-table-column>
    </el-table>
  </div>
</template>

如果想使用下拉选择框切换语言，要将设置的语言存储在localstorage中，关闭页面再进入会保留上次设置的语言。设置@change="select"方法如下

methods:{
    select(val){
      console.log(val)
      window.localStorage.setItem('locale',val)
      this.$i18n.locale = val
      window.location.reload()
    }
  }

实现结果如图