新手学vuecli3跨域问题的坑

新手学vue
看了两天vue的视频 今天开始上手做项目 不得不感慨一下 理论和实践差距很大。
遇到的第一个大坑 就是实际请求服务器接口的时候出现的跨域问题。

解决方法：
在网上查了一些资料，给出的解决方法是在config文件夹下的index.js里面配置一下
但是我打开我的文件目录 瞬间懵逼了，没有这个文件夹~~
然后略微思考，感觉应该是vue版本的问题 后来查找vuecli3的相关问题，找到了解决办法，
在package.json同级新建一个vue.config.js
然后在里面写如下代码

module.exports = {
    outputDir: 'dist',   //build输出目录
    assetsDir: 'assets', //静态资源目录（js, css, img）
    lintOnSave: false, //是否开启eslint
    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8080',
        https: false,
        hotOnly: false, 
        proxy: {
            '/api': {
                target: '', //API服务器的地址
                ws: true,  //代理websockets
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                    '^/api': '/'
                }
            }
        },
    }
}

保存以后 再次请求接口 发现跨域问题没有啦 但是另一个让人迷惑的事情来了

请求地址变成了本地的
又在网上搜了相关资料才明白 这个方法是通过把域名修改来达到跨域的目的，而实际访问的路径却是另一个域名的资源，这就是通过proxy来实现跨域的方法。
附上对应网址：
https://blog.csdn.net/ep_little_prince/article/details/101826018