vue实现中英文切换功能

1、首先在百度翻译的开放平台中，获取属于自己的APPid，没有注册先注册

2、得到了这些基本信息后，需引入md5插件npm install --save js-md5

3、请求接口及对应参数

通用翻译API HTTP地址：

http://api.fanyi.baidu.com/api/trans/vip/translate

通用翻译API HTTPS地址：

https://fanyi-api.baidu.com/api/trans/vip/translate

4、核心代码（注意：axios此处设置了代理，请查看本文评论区 ）

<template>
  <div class="app box">
    <el-input type="text" v-model="zhStr" style="width:300px;margin-right:10px" />
    <el-button type="primary" @click="toEn">翻译</el-button>
    <p>{{enStr}}</p>
  </div>
</template>
<script>
import md5 from 'js-md5';
import axios from 'axios';
export default {   
  data(){
    return {
      zhStr: '',
      enStr: '',
      appid: '你的appid',
      userkey: '你的密钥',
      salt:parseInt(Math.random() * 1000000000),//随机数
    }
  },
  methods: {
    async toEn(){
      const str = `${this.appid}${this.zhStr}${this.salt}${this.userkey}`;
      const sign = md5(str);/* md5加密，生成签名 */
      const params = {
        q: this.zhStr,
        from: 'zh',
        to: 'en',
        appid: this.appid,
        sign,
        salt: this.salt
      }
      const res = await axios.get('/baidu/api/trans/vip/translate', {
        params
      });//此处设置了代理，请查看本文评论区
      console.log(res);
    }
  }
}
</script>

5、返回结果

注意：如果出现404的情况，请一定核实一下自己的密钥跟appid，我测试了是没有问题的，能够正常的翻译出来，还有就是代理的设置，以及MD5插件是否有下载，可以拿我案例代码测试通过了之后，再根据自己业务逻辑修改！！！