vue项目跨域问题

1.安装vue脚手架踩坑经历

写项目的时候，我和后端联调，他给我jar包，然后他的端口是8080，所以我给本地开发服务器起的端口是8000，因为端口号不同所以产生了跨域问题。于是就想着如何前端配置一个代理服务器解决跨域问题，根据网上的教程，我配置了proxyTable。

proxyTable: {
      // 这里配置 '/api' 就等价于 target
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, // 是否是跨域请求
        pathRewrite: { // 重写路径 
　　　　　　'^/api': ''
 　　　　}
　　}
 },

按理说到这一步就应该能解决跨域问题了。但是，并没有！！！我认真比对了一下配置项，发现自己没有问题~~
发现问题：最后，我师傅发现我起的项目好像不是vue脚手架起的，而是webpackage起的项目~~而且dev.env.js和prod.env.js里面啥都没配
犯错原因：当时随便在百度上搜了一下，如何用vue脚手架创建一个vue2的项目，然后跟着起了个项目，结果那篇博客写的不对
总结经验：百度和博客上的文章，鱼龙混杂，要想看文章，最好去官网~

2.如何用vue脚手架创建一个项目并解决跨域问题

2.1用vue脚手架创建一个vue项目

安装：npm install -g @vue/cli
创建一个项目： vue create my-project
具体配置信息可参考官网配置：vue脚手架官网

2.2解决跨域问题

用vue脚手架起的项目，会在根目录有一个vue.config.js文件，在该文件中做如下的配置即可

module.exports = defineConfig({
  //配置开发服务器
  devServer: {
    //设置本地服务器端口
    port: 8000,
    host: 'localhost',
    //自动打开浏览器
    open: true,
    //配置代理
    proxy: {
      '/api':{
        // 以"/api"开头的请求代理到下面的target属性的值中
        target: 'http://localhost:8080',
        //是否跨域
        changeOrigin: true,
        pathRewrite: {
          //路径重写  用'/api'代替target里面的地址
          '^/api': ''
        }
      }
    }
  }
})