Nginx部署vue项目配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了Nginx部署vue项目配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Nginx部署vue项目配置

记录一下 Nginx部署vue项目

user root;
worker_processes 1;

error_log /home/hongtu/web/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;

#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
#                  '$status $body_bytes_sent "$http_referer" '
#                  '"$http_user_agent" "$http_x_forwarded_for"';

#access_log  logs/access.log  main;

sendfile        on;
#tcp_nopush     on;

#keepalive_timeout  0;
keepalive_timeout  65;

#gzip  on;

server {
    listen 80; # 此处填写你的端口
    gzip on; # 开启gzip
    gzip_min_length 1k; # 小于1k的不压缩
    gzip_comp_level 9; # 压缩等级
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩类型
    gzip_vary on; # 启用压缩
    gzip_disable "MSIE [1-6]\.";

    server_name 192.168.0.1; # 此处填写你的服务器地址
    charset utf-8; # 此处填写你的编码
    #root /usr/share/nginx/html; # 此处填写你的项目路径
    #index index.html index.htm index.nginx-debian.html; # 此处填写你的首页
    #fastcgi_connect_timeout 6000s; # 此处填写你的超时时间
    #fastcgi_send_timeout 6000s; # 此处填写你的超时时间
    #fastcgi_read_timeout 6000s; # 此处填写你的超时时间

    location / {
    root /usr/share/nginx/html/dist;	
        try_files $uri $uri/ /index.html;
    index  index.html;
    proxy_pass http://0.0.0.0:9200; // 前端地址
    add_header Access-Control-Allow-Origin *;
        fastcgi_connect_timeout 6000s;
        fastcgi_send_timeout 6000s;
        fastcgi_read_timeout 6000s;
        proxy_read_timeout 6000s;
    }

   # 反向代理,代理标志后面要不要加/,要看最终发送的请求api在不在，和我们配置代理 pathRewrite差不多
   location ^~ /api {
       proxy_pass http://127.0.0.1:8888; # 此处填写你的后端代
       rewrite ^/api/(.*)$ /$1 break; # 如果指定的正则表达式与请求的URI匹配，则URI将按照替换字符串中的指定进行更改。重写指令按照它们在配置文件中出现的顺序依次执行
       proxy_set_header Host $host; # 代理服务器会将请求头中的host字段设置为代理服务器的地址
       proxy_set_header X-Real-IP $remote_addr; # 允许对传递给代理服务器的请求头重新定义或追加字段
       proxy_set_header X-Real-Port $remote_port; #
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 客户端请求报头字段，其中添加了$remote_addr变量，用逗号分隔
       #fastcgi_connect_timeout 6000s;
       #fastcgi_send_timeout 6000s;
       #fastcgi_read_timeout 6000s;
       #proxy_read_timeout 6000s;
    }
}

include servers/*;

# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
#    listen       8000;
#    listen       somename:8080;
#    server_name  somename  alias  another.alias;

#    location / {
#        root   html;
#        index  index.html index.htm;
#    }
#}


# HTTPS server
#
#server {
#    listen       443 ssl;
#    server_name  localhost;

#    ssl_certificate      cert.pem;
#    ssl_certificate_key  cert.key;

#    ssl_session_cache    shared:SSL:1m;
#    ssl_session_timeout  5m;

#    ssl_ciphers  HIGH:!aNULL:!MD5;

#    location / {
#        root   html;
#        index  index.html index.htm;
#    }

}文章来源地址https://www.toymoban.com/news/detail-507885.html

到了这里，关于Nginx部署vue项目配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！