簡介

記錄一下，前端使用vue，后端使用若依（ruoyi，基于spring-boot）實現(xiàn)頁面，后端返回提示信息國際化

前端

vue：2.6.12

vue-i18n：^8.27.2

安裝vue-i18n，注：最新的交于該版本有差異，所以指定使用版本：8.27.2

npm install --save vue-i18n@8.27.2 --force

添加國際化js文件：language.en_US.js

export default {
  message: {
    "language": "language",
  }
}

添加國際化js文件：language.zh_CN.js

export default {
  message: {
    "language": "語言",
  }
};

添加i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from '@/api/language/language.en_US'
import usLocal from '@/api/language/language.zh_CN'

// element-ui 組件國際化
import ElementLocale from 'element-ui/lib/locale'
import elementEnLocal from "element-ui/lib/locale/lang/en"
import elementZhCNLocal from "element-ui/lib/locale/lang/zh-CN"

ElementLocale.i18n((key, value) => i18n.t(key, value))

Vue.use(VueI18n);
const messages = {
  en_US: {
    ...enLocale,
    ...elementEnLocal
  },
  zh_CN: {
    ...usLocal,
    ...elementZhCNLocal
  }
}
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh_CN', // 通過this.$i18n.locale的值實現(xiàn)語言切換
  messages,
});


export default i18n;

main.js加載i18n.js

import i18n from "@/api/i18n"

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

添加vue文件，方便使用

<template>
  <div>
    <el-select style="width: 100%" @change="changeLanguage" v-model="lang">
      <el-option v-for="lan in langList"
                 :key="lan.value"
                 :label="lan.label"
                 :value="lan.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
import {isNotNull} from "@/api/default";
import { changeLanguages } from "@/api/system/api";

export default {
  name: "i18n",
  data(){
    return {
      lang: "cn",
      langList: [
        {
          label: "中文",
          value: "zh_CN"
        },
        {
          label: "English",
          value: "en_US"
        }
      ],
    }
  },
  created() {
    let value = localStorage.getItem("lang");
    if (isNotNull(value)){
      this.lang = value;
    }
  },
  methods: {
    changeLanguage(value){
      this.$i18n.locale = value;
      localStorage.setItem("lang", value);
      changeLanguages(value).then(response => {
        console.info("change-language:" + value);
        window.location.reload();
      });
    },
  }
}
</script>

changeLanguages，用于訪問后端接口，修改語言

/**
 * * 獲取信息
 * @param address
 * @returns {AxiosPromise}
 */
export function changeLanguages(lang){
  return request({
    url: '/changeLanguages',
    method: 'get',
    headers: {
      isToken: false,
    },
    params: {
      lang: lang
    }
  })
}

使用方式：

#form中使用
<el-form-item class="mb-3" prop="lang" :label="$t('message.language')">
	<i18n-select></i18n-select>
</el-form-item>

#導入
import i18nSelect from "@/components/i18n/i18n"

# 加載
components: { i18nSelect }

#script內(nèi)使用：
this.$t("message.language")

?若依分離版后端

版本：3.8.4

添加：I18nConfig

package com.ruoyi.framework.config;

import java.util.Locale;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.i18n.LocaleChangeInterceptor;
import org.springframework.web.servlet.i18n.SessionLocaleResolver;

/**
 * 資源文件配置加載
 *
 * @author ruoyi
 */
@Configuration
public class I18nConfig implements WebMvcConfigurer
{
    @Bean
    public LocaleResolver localeResolver()
    {
        SessionLocaleResolver slr = new SessionLocaleResolver();
        // 默認語言
        slr.setDefaultLocale(Locale.SIMPLIFIED_CHINESE);
        return slr;
    }

    @Bean
    public LocaleChangeInterceptor localeChangeInterceptor()
    {
        LocaleChangeInterceptor lci = new LocaleChangeInterceptor();
        // 參數(shù)名
        lci.setParamName("lang");
        return lci;
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry)
    {
        registry.addInterceptor(localeChangeInterceptor());
    }
}

添加接口：changeLanguages，只是提供給前端調(diào)用，修改語言使用

    @GetMapping("/changeLanguages")
    public AjaxResult changeLanguages(String lang){
        return AjaxResult.success();
    }

添加：messages_en_US.properties

success=Success

添加：messages_zh_CN.properties

success=成功

application.yml配置，i18n/messages，表示在文件夾：resource/i18n下的messages_xx.properties文件，其中xx為Locale的信息，例如：Locale SIMPLIFIED_CHINESE，lang為：zh；country為：CN，所以對應的國際化文件為：messages_zh_CN.properties文件

# Spring配置
spring:
  # 資源信息
  messages:
    # 國際化資源文件路徑
    basename: i18n/messages

使用：使用：MessageUtils.message("success")，來獲取所需返回的信息即可，示例：文章來源地址http://www.zghlxwxcb.cn/news/detail-532102.html

    @GetMapping("/test")
    public AjaxResult test(){
        return AjaxResult.success(MessageUtils.message("success"));
    }

到了這里，關于vue 前端 + 若依（ruoyi）后端 實現(xiàn)國際化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！