Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，是部署前端项目的首选，在 Nginx 中部署 vue 项目的步骤如下：
1、原始配置文件如下
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
2、将前端 Vue 项目打包，将 dist 目录下的全部文件上传至 nginx 的 html 目录下
我这里把 dist 改成了 test，方便多个项目同时部署的时候能够区分开
3、修改配置文件
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root html; index index.html index.htm; } # vue项目 location /test { alias /usr/local/nginx/html/test/; try_files $uri $uri/ /index.html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
到 sbin 目录，执行命令重启 nginx
./nginx -s reload
访问部署的 vue 项目，通过 ip/test/ 就可以访问到了
