nuxt2 国际化设置及UI组件配置

不废话直接上干货。

首先在assets文件中创建两个语言JS文件。

内容分别是

以上只有antdesignVue组件引入的中英文包，其他具体的不同语言描述请在components后添加，中文添加中文的，英文添加英文的，key值保持一致。

然后在plugins文件中创建i18n.js文件。

import en_us from '../assets/lang/en_us.js'
import zh_cn from '../assets/lang/zh_cn.js'


import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)
export default ({ app }, inject) => {
  app.i18n = new VueI18n({ 
    locale:'zh',  //通过cookie设置国际化（用户选择一次终身不切换）
    fallbackLocale: 'zh',   //默认国际化
    messages: { 
      en: en_us,
      zh: zh_cn
    }
  })
}

将刚刚创建的两个语言JS引入，在nuxt.config.js的plugins模块引入使用

 为防止奇怪问题在打包build这里都进行了添加

 vendor: ['ant-design-vue', 'axios','vue-i18n'],
 transpile: ['ant-design-vue', 'element-china-area-data', 'vue-qr', 'vue-cropper','vue-i18n'],

 最后就是在页面中的使用了，创建了一个selectLang.vue

<template>
  <a-dropdown>
    <div  @click="(e) => e.preventDefault()">
      <a-icon type="global" />
    </div>
    <a-menu slot="overlay" :selectedKeys="selectedKey">
      <a-menu-item key="CN" @click="handleSelect('CN')">
        <span>简体中文</span>
      </a-menu-item>
      <a-menu-item key="US" @click="handleSelect('US')">
        <span>English</span>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
const locales = ["zh-CN", "en-US"];
const languageLabels = {
  "CN": "zh",
  "US": "en",
};
const languageValues = {
  "zh": "CN",
  "en": "US",
};
export default {
  name: "SelectLang",
  data() {
    return {
      selectedKey:'CN'
    };
  },
  mounted() {
    this.selectedKey = languageValues[localStorage.getItem("locale") || 'zh'];
  },
  methods: {
    handleSelect(key){
      this.selectedKey = key;
      this.$i18n.locale = languageLabels[key];
      localStorage.setItem("locale", languageLabels[key]);
      this.$store.dispatch('setLocale',languageLabels[key])
    }
  },
};
</script>

<style></style>

 服务端还是老问题就是刷新的问题，这个就好解决了，在几个父页面上

 if (process.client) {
      this.ismobile = this.$store.state.global.ismobile;
      this.$i18n.locale =  localStorage.getItem("locale") || 'zh';
    }

//在mounted（）中重新赋值

computed: {
    locale() {
      // 只是为了切换语言时，更新标题
      return this.$i18n.getLocaleMessage(this.$store.getters.locale).antLocale;
    },
  },
  mounted() {
    let locale = localStorage.getItem("locale") || 'zh';
    this.$store.dispatch('setLocale',locale)
  },



 <a-config-provider :locale="locale">
      <nuxt-child></nuxt-child>
    </a-config-provider>

之前查使用各种报错，这样顺利实现了项目的国际化展示 

系统路由菜单实现国际化，之前一直想着是在路由菜单页面$t(‘xxx’)将title设置成变换的结果发现在JS文件中是拿不到this vue  的，然后在网上看看模板文件的国际化是怎么做的，发现人家直接将title设置成多语言的那个key值，然后在菜单组件渲染以及tag组件渲染meta.title的时候才$t('meta.title')简直是一下子打破自己的思维限制。记录一下，菜单国际化。

表格表头以及分页的多语言展示。

在语言文件中配置如下：

大多数表格展示都需要用到插槽展示表头，在data中只会初始化一次，改变无效

分页需要展示共多少条的配置也有，页面中这么写

展示效果：

 

表单验证国际化设置。 

在data中使用this.$t()很多时候不生效，除了上述使用插槽的方法外，又发现使用计算属性也可以，将表头的clums放在计算属性中每次获取都会重新计算根据国际化的变化就能展示对应的语言，因此表单的校验rules也可以这么做，就不会因为data初始化后不会变化导致不成功了

 

国际化向后端传参头部信息

Accept-Language:

zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

中携带对应的语言语种在这篇文章中得到了启发Nuxt中Axios的封装及接口统一管理方案_nuxt axios-CSDN博客

 config.headers['Content-Type'] = 'application/json'
    /* 如果你需要token */
    // const token = store.state.token || ''
    // if (token) {
    //   config.headers.Authorization = `Bearer ${token}`
    // }
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/weixin_40001194/article/details/125372951

 

在封装的这里使用token当时就设置成了头部语言设置属性从store中获取，每次切换后发起请求就变成切换后的语言语种了