nginx代理前后端分离部署的前端vue

nginx代理前后端分离部署的前端vue

先说一下我使用的背景：
项目中前端打包后总是会出现一些不兼容的情况，所以在本地开发的时候可以将项目打包后用nginx来代理访问查看修改不兼容的地方，避免后期发布上线再出现大量的不符合要求的展示。

一、首先看一下vue本地的代理工具

target就是你要访问的接口
changeOrigin：开启代理服务

二、用nginx代理配置
当前后端分开部署的时候，可以用nginx代理，可解决跨域问题

 server {
        listen       8080;  #浏览器访问的端口
        server_name  localhost; #浏览器请求的地址
		

		location / {
			client_max_body_size 100m;
            root   D:/JR2/hhh/dist/; #打包后要加载的vue项目包，dist是npm run build 打包生成的
            index  index.html index.htm;
			try_files $uri $uri/ /index.html;
        }
   
		location /api/ {
			client_max_body_size 100m;
			proxy_pass http://149.129.15.73:8081/;  #这里和你本地target里的地址一样，也就是nginx代理的后台服务器的地址
		}
		
    }

三、使用
当配置好以后记得去启动nginx.exe

启动成功后可以去任务管理器中查看是否有进程

这个时候通过浏览器输入上面配置的localhost：8080就可以进行访问了。

和本地运行直观不同的是，用nginx代理后不用再启动本地vue项目，将vue项目打包好后直接去浏览器访问就可以了。

总结：个人理解就是通过nginx帮我们存储后台服务器的地址，然后它又给我们一个访问地址，我们去访问它给的地址，然后它帮我们转发到后台服务器。

初次学习记录，难免有错！