vue 静态资源部署 nginx ，同时配置代理，踩坑记录

   这天想把vue项目打包放nginx静态资源，然后能代理访问另一个ip的api，记录一下配置的坑。

   之前没用过nginx，配置的时候就照着网上搞，结果搞了个把小时才配置对。具体过程不详细说了，直接说配置会有什么效果，如果有错误欢迎大佬指正。

最终期望效果是这样，访问nginx：10.0.0.7/cmtPro/ 可以访问到静态资源。然后请求能够代理请求到另一个ip的接口。

 最开始我 测试配置 类似这样的：这样预期的效果是 10.0.0.7/cmtPro2/ 能够访问资源

图一：

图二：这是资源路径

 图中红框配置，结果访问地址 10.0.0.7/cmtPro2/ 发现不能访问，查看日志可以发现

访问的路径是 root 加上 location，就是这个/home/nginxWeb/cmtPro/cmtPro/2index.html 地址了，查看图二可以发现路径下面没有这个cmtPro2文件夹，那这里大家应该就明白该怎么配置了。

正确配置：

到时候访问 10.0.0.7/cmtPro/ 实际路径就是 /home/nginxWeb/cmtPro 下面的资源，就是正确资源了。

第二个注意的地方，下方红框，vue 的配置vue.config.js，注意这个地方pulicPath

要和你的项目名保持一致，比如我现在配置成cmtPro2 (错误配置)，然后访问nginx：10.0.0.7/cmtPro/，可以发现所有请求资源路径走了cmrPro2/***，如下红框。所以config 里面的 publicPath 注意要和项目名称一致。

现在将vue的 配置 publicPath 修改为 cmtPro，这个时候就对了。

最后一步就简单了，vue 的axios2 的配置，这里的baseURL，就是使用axios请求的时候会在前面加上这个，这个需要和nginx里面的代理配置一致，如下图

我这里用的是/api/ 这个 baseURL 测试，实际情况按需修改，然后 proxy_pass 指向的就是请求的ip 地址，比如最终我访问一个数据请求 10.0.0.7/cmtPro/#/userList ，里面会用axios请求 cmtPro/api/*** ，然后nginx就会代理请求到指定的ip 10.0.0.8:8088 。

到此配置完成。

转载请注明出处，谢谢。