本文介绍了如何从原本计划使用Tomcat部署Vue项目转向使用Nginx的流程。通过简单几步，包括下载并解压Nginx，配置Vue打包后的文件，以及修改Nginx配置文件，特别是设置监听端口、前端路径和后端接口代理。相较于Tomcat，Nginx在部署Vue项目时显得更为便捷。在尝试Tomcat部署时遇到的代理失效问题，Nginx则能轻松解决。
描述：从未部署的vue项目，开始准备了tomcat和nginx，最后发现nginx比较方便，nginx部署的话只准备nginx就可以了。
nginx部署过程：
1、下载nginx的压缩包，直接解压到目的路径就可以。
2、将vue项目打包后的文件夹放在nginx安装路径下的html文件夹中。
3、配置nginx的配置文件（\conf\nginx.conf）
如图，改三个地方
（1）项目启动地址端口：
listen：vue启动端口
server_name：服务器地址
（2）前端打包的路径
location：页面路径
root：前端打包文件的路径，从html层开始
index：打包内index.html，一般不用动
（3）后端接口的代理，路径和地址
location：跟vue项目的配置有关，改成对应的URL就好
proxy_pass：转发请求的地址，就是后台的地址+端口号，一定要加http/https
到此，vue项目部署到nginx就ok了。开始我用的是tomcat的方式，问题就是代理失效不知道怎么解决。
有个坑记录一下，我打包后的文件夹是home
放在webapps下tomcat启动后，访问报错index.html中的js、css文件等都找不到。解决办法是要在tomcat的配置文件中加入路径（index.html的绝对路径），如下：
访问项目的时候就是：地址+端口号/home
这样部署的代理问题没有解决，然后我就用了nginx
8800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
