vue动态加载VueI18n实现国际化

傷城~ 2021-10-14 18:39 1004阅读 0赞

### vue动态加载VueI18n实现国际化 ###

*  前言
 *  编写后端工程
 *   *  编写前端工程

# 前言 #

前一段时间给大家写了一个基于spring boot和iview的前后端分离架构，当时国际化的语言信息是直接在前端直接事先配置好的，因此当我们感觉那个国际化不合适的时候我们都需要在前端去维护我们的国际化信息，因此就想有没有一种方式可以直接从后端请求获取国际化的信息然后进行国际化信息的加载，百度了半天都没有找到自己需要的，试了自己想的几种方式都感觉不是很完美，这时候直接撸VueI18n的官网了，终于皇天不负有心人在官网看到了如下的说明官网地址【】：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
OK 这个就是我们想要的东西了，就是如何实现我们的热加载，那么基于这个我们可以开始编写我们的热加载的demo例子了，该博客不会去完整的实现前后端的国际化的功能，这里只是简单的给大家讲解如何实现从后端获取数据，同时将获取的数据加载到前端实现国际化的功能。

# 编写后端工程 #

我们首先创建一个空的项目，接着在空的项目底下创建一个我们的后端工程，然后在这个后端工程里面写一个最简单的controller方法，方法如下：

package com.vue.demo.controller;
    
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.util.HashMap;
    import java.util.Map;
    
    /**
     * @author linzf
     * @since 2019/8/14
     * 类描述：
     */
    @RestController
    @RequestMapping("/internationalize")
    public class VueController {
    
        /**
         * 功能描述：初始化国际化信息
         * @return 返回初始化结果
         */
        @GetMapping("initInternationalize")
        public Map<String,Object>  initInternationalize(){
            Map<String,Object> obj = new HashMap<>();
            Map<String,Object> val = new HashMap<>();
            val.put("text","你好阿");
            obj.put("testLoad",val);
            return obj;
        }
    
    }
    然后我们需要设置我们的后端允许跨域，我们增加一个允许跨域的配置文件，代码如下：

package com.vue.demo.config;

import org.springframework.context.annotation.Bean;  
import org.springframework.context.annotation.Configuration;  
import org.springframework.web.servlet.config.annotation.CorsRegistry;  
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/\*\*

*  @author linzf
 *  @since 2019/4/25
 *  类描述：  
    \*/  
    @Configuration  
    public class CorsConfig \{
    
    @Bean  
    public WebMvcConfigurer corsConfigurer() \{  
    return new WebMvcConfigurer() \{  
    @Override  
    public void addCorsMappings(CorsRegistry registry) \{  
    registry.addMapping("/\*\*")  
    // 它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，也可以设置为*号支持全部  
    .allowedHeaders("*")  
    // 该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。  
    .allowedMethods("*")  
    // 本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求  
    .allowedOrigins("*")  
    // 该字段可选，用来指定本次预检请求的有效期，单位为秒  
    .maxAge(1728000);  
    \}  
    \};  
    \}

接着我们启动工程然后访问http://127.0.0.1:8080/internationalize/initInternationalize ，我们会看到如下的信息返回：

{"testLoad":{"text":"你好阿"}}

那么到此处我们就完成了我们后端工程的编写了。

## 编写前端工程 ##

接着我们在我们的项目底下创建一个vue的工程，如何创建工程就不说，我们工程创建完成以后直接打开我们的package.json引入我们的axios和我们的vue-i18n，如下所示：

"dependencies": {
        "vue-i18n": "^7.8.0",
        "axios": "^0.15.3",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1"
      },

接着我们使用npm install命令安装好我们的依赖，依赖安装完成以后我们打开我们的main.js，改造完成以后代码如下：

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import VueI18n from 'vue-i18n'
    import Axios from 'axios';
    
    Vue.use(VueI18n);
    
    Vue.config.productionTip = false
    
    const i18n = new VueI18n({
      locale: 'zh-CN'
    });
    
    
    /* eslint-disable no-new */
    const app = new Vue({
      el: '#app',
      i18n,
      router,
      components: { App },
      template: '<App/>'
    })
    
    Axios.get('http://127.0.0.1:8080/internationalize/initInternationalize',{})
      .then(response => {
        i18n.setLocaleMessage('zh-CN',Object.assign(response.data));
      });

核心关键点就是最后的通过Axios来加载数据然后加载到我们的i18n中，这段就是实现热加载我们的国际化信息的数据的方式，这边如果你的zh-CN之前设置过了值，记得要在这边也要把之前的值补进去，否则会被覆盖，最后我们改造我们扥App.vue页面，代码如下：

<template>
      <div id="app">
        <img src="./assets/logo.png">
        {
       {$t('testLoad.text')}}
        <router-view/>
      </div>
    </template>

现在我们将侯丹工程和前端工程全部运行起来，然后我们访问我们的前端工程我们会看到如下的页面则说明我们的动态加载国际化就完成了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
配套的demo的代码的github地址：[https://github.com/lazyboyl/vue-18n-demo][https_github.com_lazyboyl_vue-18n-demo]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211015/40d436b6290e4d86a3dd67c37e68cbcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211015/d7d401fb4b444d3f999881b362815541.png
[https_github.com_lazyboyl_vue-18n-demo]: https://github.com/lazyboyl/vue-18n-demo