1，vue3.0根目錄下建立vue.config.js檔案；

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://you.163.com/', //介面域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https介面
                pathRewrite: {                  //路徑重置
                    '^/api': ''
                }
            }
        }
    }
};

2，將上述程式碼塊寫入其中；

如圖：

3，將api介面放入請求的url中；

使用頁面的程式碼塊：

<template>
    <div>
        <H1>TEST</H1>
        <p>{{data}}</p>
    </div>
</template>
 
<script>
    import axis from 'axios';
    export default {
        name: 'Test',
        data() {
            return {
                data: {},
            };
        },
        methods: {
            getData() {
                axis.get('/api/xhr/search/queryHotKeyWord.json')//axis後面的.get可以省略；
                    .then(
                        (response) => {
                            console.log(response);
                            this.data = response;
                        })
                    .catch(
                        (error) => {
                            console.log(error);
                });
            },
        },
        mounted() {
            this.getData();
        },
    };
</script>
 
<style scoped>
 
</style>

程式碼解析：

瀏覽器頁面：

剩下的就是把資料渲染到頁面了。

實際示例

vue3 8080埠請求flask8081埠服務資料：

module.exports = {
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        open: true,
        proxy: {
            '/api/testcase/': {
                target: 'http://127.0.0.1:8081/', //介面域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https介面
                pathRewrite: {                  //路徑重置
                    '^/api/testcase/': '/api/testcase/'
                }
            }
        },
    },
}

axis.get('/api/testcase/')//axis後面的.get可以省略；
                        .then(
                            (response) => {
                                console.log(response);
                                this.totaltableData = response.data['result'];
                            })
                        .catch(
                            (error) => {
                                console.log(error);
                    });

flask介面地址:

# http://127.0.0.1:8081/api/testcase/
@app.route('/api/testcase/')
def alltestcase():
    pass

參考：https://blog.csdn.net/weixin_45264991/article/details/104182742