Nginx部署Vue项目许多合作伙伴希望在完成Vue项目后将其部署到服务中并自行运行。 实际上，使用Nginx可以简单地完成，还可以实现请求转发等功能。 看看使用步骤吧。
使用Nignx部署Vue项目的步骤1.Vue项目打包npm run build首先使用打包命令打包Vue项目，然后检索dist文件夹。 它包含打包的静态资源文件。
注：在本例中，根据项目的不同，打包的命令可能不同。 您需要在package.json上查看脚本。 每个属性都是一个命令，通常包括npm run serve、npm run build、npm run lint…等等
结构因项目而异哦。 我在使用vue-element-admin框架。 具体的打包方法可以查看框架的相关文档哦。
将dist文件夹复制到Vue的默认目录中，安装Nginx并找到安装根目录。 将dist目录中的文件复制到html。 这是默认的nginx根目录。 这样，您就可以直接运行配置文件，而无需修改。
复制完成后，双击nginx.exe运行nginx即可运行。
3 .在高级配置中，ngxin通常安装在单独的服务器上，因此通常将打包vue的dist保留在服务上的特定位置，并更改nginx.conf的根路径以指向dist。
如果您希望配置nginx以满足您的需求，或者希望部署多个项目。 必须通过修改配置文件来完成。
把我自己的配置放在这里。 具体请参考评论。
server { #需要接收的端口号假设未使用此端口号。 如果未使用，Nginx重新启动时将报告listen 8888错误。 #服务名称，无关紧要的server_name localhost； #上述端口指向的根目录root /opt/asing1elife/teamnote； #在项目根目录下指向项目首页index index.html； client_max_body_size 20m； client_body_buffer_size 128k； #根请求指向的页面location/{ #这里的@router实际上引用以下传输： 否则，在更新Vue路由时，404 try_files $uri $uri/@router； #请求目标首页index index.html； } #路由的资源不一定是实际路径，因为找不到具体的文件，所以请在index.html中重写请求，然后将真正的Vue路由处理请求资源定位@ router { rewer } } #重要步骤。 这里是从http://192.168.7.833608888/team note/API /开始的所有请求，#这里不是/teamnote/API/， 这意味着要转发到以下proxy_pass指定的链接：前端项目本身的访问链接与http :192.168.7.833608888/team note/#前端访问请求区分开来proxy_set_header Host $host； proxy _ set _ headerx-real-IP $ remote _ addr； proxy _ set _ headerx-forwarded-for $ proxy _ add _ x _ forwarded _ for； proxy _ set _ header cookie $ http _ cookie； # for Ajax # fastcgi _ param http _ x _ requested _ with $ http _ x _ requested _ with； proxy _ set _ header http-x-requested-with $ http _ x _ requested _ with； proxy _ set _ header http _ x _ requested _ with $ http _ x _ requested _ with； proxy _ set _ headerx-requested-with $ http _ x _ requested _ with； client_max_body_size 10m； client_body_buffer_size 128k； proxy_connect_timeout 90； proxy_send_timeout 90； proxy_read_timeout 90； proxy_buffer_size 128k； proxy_buffers 32 32k； proxy_busy_buffers_size 128k； proxy_temp_file_write_size 128k； }重新启动Nginx使用Nginx -s reload可以重新加载Nginx配置文件，但如果配置文件中存在错误，请使用Nginx -s stop停止Nginx服务，然后使用Nginx启动Nginx服务如果配置文件存在异常，则在启动失败的linux环境中通常很少使用winx。要在linux上安装nginx，请使用官方编译的软件包进行安装，然后使用源代码进行安装
第一种方法参见官方地址https://nginx.org/en/Linux _ packages.html # stable
第二种方法参考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段，实际上将以下tar.gz包发送到linux服务
在linux服务上和窗口环境中使用nginx部署vue项目没有很大区别。 只要将生成的vue项目dist上传到linux服务，对nginx服务中的根进行通用修改，指向dist即可。 然后使用
# centos7systemctlrestartnginx.service # centos6servicenginxrestart或平滑重新启动
service nginx重新加载中心7
systemctl restart nginx.service
centos 6服务nginx restart
或顺利重新启动service nginx reload
当然，我推荐宝塔面板。 操作概要很方便！