nginx配置vue项目，带项目名

项目是前后端分离的，vue部署到生产环境时需要带项目名进行访问。acdmSA是我的项目名。

一、修改vue项目config/index.js中的build配置

  assetsPublicPath:'/'，改为assetsPublicPath:’/acdmSA/'。

二、修改router配置，src/router/index.js中修改router

增加base:'/acdmSA/' 

 三、打包，上传到服务器

npm run build

压缩成zip，上传到目录：/home/datastatistics-front ，解压：unzip dist.zip。如下图：

四、nginx配置

worker_processes  4;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
error_log  /var/log/nginx/error.log  info;
 
pid        /run/nginx.pid;


events {
    use epoll;
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format log_access '$remote_addr - $remote_user [$time_local] "$request" $http_host '
                          '$status $body_bytes_sent "$http_referer" '
                          '"$http_user_agent" "$http_x_forwarded_for" '
                          '"$upstream_addr" "$upstream_status" $upstream_cache_status "$upstream_http_content_type" "$upstream_response_time" > $request_time ' ;
    #access_log logs/access.log log_access;
    server_tokens off;
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;

    client_body_timeout  20;
    client_header_timeout 20;
    keepalive_timeout  3000;
    send_timeout       20;

    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 64k;
    fastcgi_buffers 4 64k;
    fastcgi_busy_buffers_size 128k;
    fastcgi_temp_file_write_size 128k;

    client_max_body_size 800m;
    client_body_buffer_size  2048k;
    client_header_buffer_size 32k;
    server_names_hash_bucket_size 2048;
    server_names_hash_max_size 1024;
    proxy_connect_timeout    60;
    proxy_read_timeout       300;
    proxy_send_timeout       300;

    proxy_buffer_size  16k;
    proxy_buffering on ;
    proxy_buffers    4 64k;
    proxy_busy_buffers_size 128k;
    proxy_max_temp_file_size 1024m;
    proxy_temp_file_write_size 128k;
    proxy_headers_hash_max_size 512;
    proxy_headers_hash_bucket_size 256;

    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_types       text/plain application/x-javascript text/css application/xml application/javascript  application/octet-stream;
    gzip_vary on;

   server {
        listen       8089;
        server_name  localhost 111.74.186.13;

        location /datastatistics {
          proxy_set_header Host $host:$server_port;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_pass http://111.74.186.13:18080/;
          client_max_body_size 10m;
        }

        location /acdmSA {
           alias  /home/datastatistics-front/dist/;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html =404;
        }
       
        error_page   500 502 503 504  /50x.html;
 
        location = /50x.html {
           root   html;
        }
 
    }
}

这里重点关注 location /acdmSA 的配置即可。 location /datastatistics是后端接口服务。

访问：111.74.186.13:8089/acdmSA  。

我的nginx用docker启动的。在这里不再赘述。