環境描述

本次環境是通過jenkins編譯npm run build 或者UMI_ENV=dev umi build 生成dist目錄通過Dockerfile build一個新映象上傳私服通過swarm叢集service執行映象，使用與swarm一個net下的nginx代理訪問的。

[[email protected] DEV-sk_platform_brand_common]# cat Dockerfile
FROM basic-registry.xxxx.com/skong/nginx
###繼承自centos映象

MAINTAINER waitfish from litx_sean
####建立者資訊

COPY publish/ /data/web/
COPY web.conf /data/conf/
COPY run.sh /run.sh

RUN chmod u+x /run.sh
########
########
[[email protected] DEV-sk_platform_brand_common]# cat web.conf
server {
listen 80;
server_name 127.0.0.1;
index index.html;
root /data/web;
access_log logs/web.log;

    location / {
         try_files $uri $uri/ @router;
         index index.html;
     }

    location @router {
        rewrite ^.*$ /index.html last;
    }
 

}
########
########
[[email protected] DEV-sk_platform_brand_common]# cat run.sh
#!/bin/bash
source /etc/profile
if [ -n "$ENV" ]
then
sed -i s/^global.serverCd.*/"global.serverCd = '$ENV'"/g /data/web/config.js
fi
/data/nginx/sbin/nginx && tail -f /data/nginx/logs/error.log
[[email protected] DEV-sk_platform_brand_common]#

########
#
#
docker build -t registry.xxxx.com/sk_platform_brand_common_dev:master .
#
#
docker service create --name sk_platform_brand_common_dev --hostname sk_platform_brand_common_dev --network sk-net registry.xxxx.com/sk_platform_brand_common_dev:masterr
#
#

########
swarm叢集對外開放的nginx配置

server {
listen 80;
server_name dev-brand2.xxxx.com;
location / {
proxy_pass http://sk_platform_brand_common_dev;
proxy_redirect off;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
access_log logs/sk_platform_brand_common_dev.log;
}
#
#
docker restart nginx``

1.問題：

使用Vue.js框架，利用vue-route結合webpack編寫了一個單頁路由專案，運維協助在伺服器端配置nginx。部署完成後，訪問首頁沒問題，從首頁裡開啟二級頁面沒問題，但是所有的二級頁面開啟後，再次重新整理，就會出現404現象。

2.原因：

重新整理頁面時訪問的資源在服務端找不到，因為vue-router設定的路徑不是真實存在的路徑。如上的404現象，是因為在nginx配置的根目錄/Data/app/xqsj_wx/dist下面壓根沒有loading這個真實資源存在，這些訪問資源都是在js裡渲染的。
服務端nginx的一開始配置如下（假設域名為：flymoth.com）：
server {
listen 80;
server_name 127.0.0.1;
index index.html;
root /data/web;
access_log logs/web.log;

如上出現404的原因是由於在這個域名根目錄/Data/app/xqsj_wx/dist下面壓根就沒有loading這個真實目錄存在。

3.解決方案

在nginx配置裡新增vue-route的跳轉設定（這裡首頁是index.html，如果是index.php就在下面對應位置替換），正確配置如下：
server {
listen 80;
server_name 127.0.0.1;
index index.html;
root /data/web;
access_log logs/web.log;

            //以下為新新增的

    location / {
         try_files $uri $uri/ @router;
         index index.html;
     }

    location @router {
        rewrite ^.*$ /index.html last;
    }

}