1.配置普通html
server { listen 1000; server_name www.localhost1000.com; location / { root /home/middleware/nginx/webPage/partner; index index.html index.htm; } location /partner { alias /home/middleware/nginx/webPage/partner; index index.html index.htm; } }
2.配置单个vue应用
server { listen 1000; server_name www.localhost1000.com; root /home/middleware/nginx/webPage/partner; # vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址) location / { try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 index index.html index.htm; } #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件 #因此需要rewrite到index.html中,然后交给路由在处理请求资源 location @router { rewrite ^.*$ /index.html last; } }
server_name说明。server_name就是域名指向。比如我们这里配置了www.localhost1000.com
修改本机的【客户端】:C:WindowsSystem32driversetchosts
10.200.1.87 www.localhost1000.com
此时,在浏览器访问:http://www.localhost1000.com:1000
即可匹配nginx对应的server块。实际就是访问http://10.200.1.87:1000。
3.配置多个vue应用
多个vue的时候,不是在一个server下配置多个location。而是配置两个同样端口的server
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name lhw-admin; charset utf-8; root /home/middleware/nginx/webPage/admin; # vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址) location / { try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 index index.html index.htm; } #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件 #因此需要rewrite到index.html中,然后交给路由在处理请求资源 location @router { rewrite ^.*$ /index.html last; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } # another virtual host using mix of IP-, name-, and port-based configuration # server { listen 80; server_name lhw-partner; root /home/middleware/nginx/webPage/partner; # vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址) location / { #alias /home/middleware/nginx/webPage/partner; try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 index index.html index.htm; } #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件 #因此需要rewrite到index.html中,然后交给路由在处理请求资源 location @router { rewrite ^.*$ /index.html last; } } }