图文未动，代码先行：

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

实现跨域共3个步骤：

1，vue3.0根目录下创建vue.config.js文件；

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>

代码解析：

浏览器页面：

 

剩下的就是把数据渲染到页面了。

 

结语：如果有错误或不足，恳请指出。如果有用的话，请多多点赞和关注吧，谢谢了！