vue-cli以及element-ui国际化实战(待完善-切换时不刷新页面)

步骤

创建 language文件夹

1. 在src同级的目录下新建language文件夹,新增三个文件，代码如下
   index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 引入各个语言配置文件
import zh from './zh'
import en from './en'

// 引入element的语言包
import locale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import cnLocale from 'element-ui/lib/locale/lang/zh-CN'

// 创建i18n实例
const i18n = new VueI18n({
  // 设置默认语言
  locale: window.localStorage.getItem('lang') || 'zh', // 语言标识
  // 添加多语言（每一个语言标示对应一个语言文件）
  messages: {
    zh: {
      ...cnLocale,
      ...zh,
    },
    en: {
      ...enLocale,
      ...en,
    },
  },
})

locale.i18n((key, value) => i18n.t(key, value))
export default i18n

en.js

const en = {
  name: 'name',
  nameRequire: 'please input name',
}

export default en

zh.js

const zh = {
  name: '姓名',
  nameRequire: '请输入姓名',
}

export default zh

项目入口文件引入上面的index文件

main.js

import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
import i18n from './language'

new Vue({
  i18n,
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')

vue文件

index.vue

<template>
  <div>
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
    <button @click="changeLangue">点击切换语言</button>
    <my-form v-bind="formConfig" v-model="formData"></my-form>
  </div>
</template>

<script>
import MyForm from '@/components/form'
import formConfig from './form-config'

import i18n from '@/language'
export default {
  components: {
    MyForm,
  },
  data() {
    return {
      formData: {},
      formConfig,
    }
  },
  methods: {
    changeLangue() {
      const currentLang = i18n.locale
      if (currentLang == 'zh') {
        i18n.locale = 'en'
      } else {
        i18n.locale = 'zh'
      }
      console.log(i18n.t('name'))
    },
  },
}
</script>

form-config.js

import i18n from '@/language'
const formConfig = {
  formItems: [
    {
      type: 'input',
      prop: 'name',
      label: i18n.t('name'),
      placeholder: i18n.t('nameRequire'),
    },
  ],
  labelWidth: '120px',
}

export default formConfig

components/form

<template>
  <div class="form">
    <el-form ref="formRef" :model="formData" :label-width="labelWidth">
      <el-form-item
        v-for="(item, index) in formItems"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :rules="item.rules"
      >
        <template v-if="item.type == 'input'">
          <el-input
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          ></el-input>
        </template>
        <template v-else-if="item.type == 'select'">
          <el-select
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            >
            </el-option>
          </el-select>
        </template>
        <template v-else-if="item.type == 'date'">
          <el-date-picker
            v-model="formData[item.prop]"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'MyForm',
  // 自定义组件上使用v-model
  //   1. 定义model。  2. 需要将model中prop值同时在props中定义
  //   父组件通过v-model指令绑定值时会将数据传递给子组件中的modelValue,子组件通过触发"update:modelValue"事件可以通知父组件
  model: {
    prop: 'modelValue',
    event: 'update:modelValue',
  },
  props: {
    modelValue: Object,
    formItems: {
      type: Array,
      required: true,
    },
    labelWidth: {
      type: String,
    },
  },
  data() {
    return {
      formData: {},
    }
  },
  emits: ['update:modelValue'],
  created() {
    // 表单初始化
    for (let item of this.formItems) {
      this.$set(this.formData, item.prop, '')
    }
    this.$emit('update:modelValue', this.formData)
  },
  watch: {
    formData: {
      handler(newValue) {},
      deep: true,
    },
  },
}
</script>

参考

https://juejin.cn/post/6922708116165361671