前端打包配置+nginx配置实现部署及部署地址带特定前缀的几种方式

前端打包后要部署到服务器，在浏览器中可以通过url访问到我们开发的系统，通过nginx代理在工作中是一种很常用的方式。

这里以本地为例，把本地电脑当作一个服务器，实现普通部署、带特定前缀等
前端使用vue-cli+vue作为例子
以下内容都只解决在不同情况下请求前端打包文件404问题，如果在index.html中有引入public下的静态资源，可以使用**<%= BASE_URL %>**来代替相对路径或绝对路径,<%= BASE_URL %>对应的就是vue.config.js中publicPath

1.hash路由+不带前缀的普通部署

效果如下：地址为ip:port/#/hashPath形式(因为用的是默认的端口80所以可以不写端口号)

这种是最简单的部署方式。部署时不使用任何前缀，且前端使用的hash路由模式，不用担心后面访问资源404问题。
配置：

1. 前端vue.config.js配置中不配置publicPath或者设置publicPath:'/'。对应的如果使用webpack.config.js，不设置output.publicPath或者设置为’/'。
2. 打包生成dist文件，放到任意自己期望的目录下面
3. 配置nginx
   示例：
   
   其中：
   location：nginx的块级指令，用来匹配url请求。这里我们打算把前端部署在不带前缀的地址上，故直接使用 / 。关于location更多的配置可以参考