vue部署到宝塔请求接口报404错误

Posted 2022-01-08 clf20731

问题

我将前端vue和后端Spring Boot全部都部署到了宝塔上，后端项目部署成功后直接请求接口成功，运行本地vue项目使用代理服务器访问接口也是成功的，但是部署到vue上的项目访问接口报404错误

解决

经向某位大佬求教后找到了解决办法：需要配置宝塔上的nginx代理才行，解决步骤如下：

1. 点击nginx的设置(如果没有nginx就在同一页面搜索安装即可)
   
2. 点击配置修改，鼠标滑动到页面最底部，复制红框里这个路径/www/server/panel/vhost/nginx(配置修改这个文件尽可能不要做改动)
   
3. 点击文件，复制该路径
   
4. 在该页面新建一个以.conf为结尾的配置文件，比如：haha.conf
   
5. 双击haha.conf进行编辑，内容如下：

	server 
	    listen  81; // 监听81端口
	    server_name localhost; // 因为我的后端和前端都部署到了宝塔上，所以server_name可以直接写localhost
	    
	    // 配置代理
	    /* 
	    	第一个代理含义：
	    	  我的网站地址是http://120.77.8.124:81/#/login/passLogin，
	    	  当它看到81后的第一条斜杠时会到`/www/wwwroot/120.77.8.124`路径底下找index.html页面
	    */
	    location / 
	        index index.html;
	        root /www/wwwroot/120.77.8.124;
	    
	    
	   	/* 
	   		配置接口代理
	   		    我前端的代理服务器代码块下的图所示。
	   		^~/api/：当nginx看到路由中包含/api/会自动将/api/去到，并将/api/前边的部分替换成`http://localhost:15050/`
	    */
	    location ^~/api/ 
	        proxy_pass http://localhost:15050/;
	    
	

经过上边这些步骤就能成功访问接口了