记一个错误，原来vue项目需要后端项目打开才能运行

最新推荐文章于 2023-03-01 08:11:02 发布

心怀梦想的咸鱼

最新推荐文章于 2023-03-01 08:11:02 发布

阅读量906

点赞数 1

CC 4.0 BY-SA版权

分类专栏：踩过的坑文章标签： vue 前端

本文链接：https://blog.csdn.net/cat_want_fly/article/details/124420623

踩过的坑专栏收录该内容

41 篇文章

订阅专栏

作者分享了在Vue项目中遇到的端口混淆问题，起初将8081误认为前端端口，通过浏览器调试和前后端配置对比，最终发现是后端项目的8081端口。这次经历提醒我们遇到问题时要全面思考，避免想当然。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搞了半天了。

原本一直好好的，但是昨天vue项目报错。

查看配置文件

export const BASEREQUESTURL = 'http://localhost:8081/'

是8081，当时陷入了误区认为这是该项目的端口号

再打开谷歌浏览器的调试台按F12

发现错误信息

没有改代码，那就是外部环境的错。

第一个想到的就是端口号

查看了vue前端的端口号。

不是8081，我尝试了把81改成8081，提示无法访。

换一种方法，

export const BASEREQUESTURL = 'http://localhost:81/'

显示404错误，404代表了没有资源。

那我重新想一遍，如果这个端口与访问资源有关，说明它不是前端的端口。

重新查找，发现

  devServer: {
    port: 81
    // proxy: {
    //   '/api': {
    //     target: config.BASEREQUESTURL,
    //     ws: false,
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '^/api': '' // 需要rewrite的,
    //     }
    //   }
    // }
  },

这个才是vue项目的端口设置。

上面那个是后端项目的端口设置。

没什么说的，运行后端项目，指定端口号为8081，运行成功。

（这个坑给我的教训是不要想当然的认为，要多想想。）