vue+AI智能机器人回复功能实现

const vueConfig = {
 //上面还有项目的其他配置
 
 devServer: {
 port: 8000,
 proxy: {
  '/ai': {
  target: 'http://openapi.tuling123.com/',
  changeOrigin: true,
  pathRewrite: {'^/ai': ''}
  }
 }
 },
}
module.exports = vueConfig

// 创建AI机器人回复请求axios实例
const aiService = axios.create({
 //VUE_APP_AI_BASE_URL=/ai
 //baseURL: process.env.VUE_APP_AI_BASE_URL,
 baseURL: '/ai',
 timeout: 10000
})

……

export {
 aiService as aiAxios
}

aiAxios.post('/openapi/api/v2', {
 reqType: '0',
 perception: {
 inputText: {
  text: this.inputContent
 }
 },
 userInfo: {
 //图灵上注册后自己的机器人apikey
 apiKey: '****',
 //登录用户用账户ID
 userId: '123456'
 }
 }).then(res => {
 let text= res.data.results[0].values.text;
 this.msgs.push({
 date: moment().format('YYYY-MM-DD HH:mm:ss'),
 from: '智能机器人',
 content: text,
 self: false,
 avatarUrl: aiHeadImg
 })
 this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
 }).catch(err => {
 this.$message.info(err);
})

<template lang="html">
 <transition name="slide-right">
 <div class="chatting">
 <!-- 聊天界面头部 -->
 <div class="chatting-header">
 <div class="chatting-back">
  <i class="icon-back"></i>
 </div>
 <div class="chatting-title">
  <h2>AI 智能机器人</h2>
 </div>
 <div class="chatting-menu">
  <i class="icon-menu"></i>
 </div>
 </div>
 <!-- 聊天内容区域 -->
 <div ref="chattingContent" id="chattingContent" class="chatting-content">
 <div v-for="item of msgs">
  <!--用户输入内容-->
  <div v-if="item.self" class="chatting-item self clearfix">
  <div class="msg-date">
  {{ item.date }}
  </div>
  <div class="msg-from">
  <span class="msg-author">{{ item.from}}</span>
  <img :src="/UploadFiles/2021-04-02/item.avatarUrl">

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。