一含滴、前置知識(shí)：在服務(wù)器上部署過前端vue項(xiàng)目和后端接口。

二始藕、應(yīng)用場(chǎng)景：當(dāng)我們?cè)L問一個(gè)域名時(shí)訪問根路徑是一個(gè)項(xiàng)目（例如www.bing.com）憨颠，訪問/shopPlatform是另一個(gè)項(xiàng)目（例如：www.bing.com/shopPlatform）。同時(shí)我們還可以訪問/api接口獲取信息（例如：www.bing.com/api/userInfo）婿屹。
三蒜田、引申問題：因?yàn)関ue項(xiàng)目打包上傳后服務(wù)器后當(dāng)訪問除根路徑外其他頁面時(shí)，一但刷新頁面會(huì)顯示404錯(cuò)誤找不到頁面选泻。要解決這個(gè)問題必須在nginx.conf文件中配置try_files $uri $uri/ /index.html，而配置了這段代碼美莫，nginx中沒有另加配置的接口代碼則無法訪問页眯。

四、參考文章

1厢呵、部署多個(gè)vue項(xiàng)目https://blog.csdn.net/kielin/article/details/94459660
2窝撵、部署后端接口，解決引申問題https://www.cnblogs.com/xinxinmifan/p/9756252.html

五襟铭、nginx.conf文件配置代碼

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
    worker_connections 1024;
}
http {
    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  /var/log/nginx/access.log  main;
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream; 
    #上面都為默認(rèn)配置
    server {
        listen       80 default_server;
        server_name localhost;
        #部署第一個(gè)vue項(xiàng)目通過“/”進(jìn)行訪問
        location / {
            root /home/itemNode/client/dist; 
            try_files $uri $uri/ /index.html;#這里配置是為了解決vue項(xiàng)目頁面刷新后無法獲取頁面的問題
        }
      #部署第二個(gè)vue項(xiàng)目通過“/storePlatform”進(jìn)行訪問
        location /storePlatform {
            alias /home/itemNode/client/storePlatform; 
            try_files $uri $uri/ /storePlatform/index.html;#這里配置是為了解決vue項(xiàng)目頁面刷新后無法獲取頁面的問題
        }
       #部署后端接口通過“/api”進(jìn)行訪問
        location /api/ {
            proxy_pass http://127.0.0.1:5000/;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}

1碌奉、配置完成后可以通過nginx -t命令來檢查配置文件是否有問題短曾。
2、第二個(gè)vue項(xiàng)目在打包前在vue.config.js中設(shè)置

module.exports = {
    publicPath: '/storePlatform/',
    outputDir:'/storePlatform/',
  };
  

3赐劣、如果沒有解決問題嫉拐，可以參考上面提供的參考鏈接。