用resin部署前台vue代码出现的问题

今天提交前端代码时出现了一个问题，本地运行时F5刷新没问题，但是一部署到服务器上刷新就出错，于是领导让我找一下问题原因。

首先我又测试了一下本地代码确实没什么问题，然后我又用nginx部署了一下代码进行测试，结果还是没发现问题，但是查找过程中发现问题可能是使用了HTML5 History模式。于是我问了领导发现我们用的是resin进行部署的。

说实话我之前真没听过，查到的东西也很少，搞得我焦头烂额的，好在最后解决了。好了开始第一个问题。

我发现resin和tomcat比较像（至少部署前端比较像），我前端用的是若依的框架，我把前端打包后放到resin/webapps/ROOT 下进行部署

这个WEB-INF是运行后自动产生的

打开页面倒是能进来，但是一直在加载，打开控制台发现报错GET http://localhost:8111/static/css/app.68ec9a6c.css net::ERR_ABORTED 404 (Not Found)

我找了半天发现要把包里的静态方法也提到外面

就是和dist包同级然后静态页面就可以使用了，然后刷新时确实出现404页面（tomcat部署好像也会出现这个情况），这里需要改一下前端代码

把这个history模式换成hash模式，具体为什么我也不太明白，官网上的解释还进不去，然后再部署一遍就可以了

然后还有访问后端接口时访问路径也不对，这个可以用nginx反向代理（还得是nginx），把路径改过来，这部分明天更新

-------------------------------------------- 分割线-----------------------------------------

将服务部署到resin上之后，进行请求时就会发现代理地址不生效，这个大家都知道是因为devServer.proxy 是 Vue CLI 本地开发服务器的功能，打包成 dist 后该功能被剥离，代理规则不再生效了

这时候就需要用nginx进行反向代理了，这个也很简单基本部署服务都需要进行这一步操作

首先打开nginx下的conf/nginx.conf 文件

然后对请求和代理地址进行修改

这样配置完之后基本就可以运行了，访问地址的端口改成8778，其他的不用改动，请求后台的地址也会自动变成自己写的地址