使用vite+ts+vue3.0，创建一个vue项目，请确保你的项目是这样创建的。

项目的配置文件是：vue.config.ts，须在配置文件中配置服务器代理，稍后便可以调用后端接口。

此文件自动生成，与package.json在同一级目录，即项目的根目录。

内容如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

加上代理的配置后：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/product/category/treeList': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

说明：

        1.'/product/category/treeList'，理解为代理的key即可，每一个key代表一条代理选项，是你在本项目中发起请求的地址；

        2.target：后端项目启动的地址，尽量不要加path，如图即可；

        3.changeOrigin：是否改变源，需要改变的，设置为true即可；

        4.其实还有一个配置，server.cors，为服务器配置跨域资源共享，默认情况下，此功能处于启用状态，并允许任何源，故无须配置；

        5.如果你需要对cors做微调或者是其他细粒度控制，请参考：expressjs/cors: Node.js CORS middleware (github.com)

开始调用：

需要axios包，先下载即可：

        npm install axios -g

另外确认请求方式，是否需要传参，这里是get请求，无须传参。

<script setup lang="ts">
import axios from 'axios';

const getData = () => {
  axios.get('/product/category/treeList')
        .then(response => {
          console.log(response.data)
        });
}
getData()
</script>

测试：

        1.将该vue文件作为主页面加载，查看控制台即可；

        2.或者加个button点击调用，均可；