vue打包成dist在----nginx中的配置

一丶部署nginx（這里不做多說）

二丶分清vue的模式

hash 模式 和 history 模式

三 丶nginx.conf配置（主要）

3.1 vue hash 模式
1. 配置修改
配置文件在 nginx.conf中
 server { 
    # 服務器端口
    listen       80;
    # 服務器名稱
    server_name  localhost;
    # 路徑配置
    location / {
        # 相對路徑配置，基於nginx啟動的位置
        root   dist;
        index  index.html;
    }
    # 后端接口，反向代理  
    location ~ /rest {
       #  反向代理
       proxy_pass http://ip:port;
    }
 }

```

2. 啟動
start nginx

3. 瀏覽器訪問

http://localhost
// 默認會跳到對應的路由，vue-router重定向，可能變成這樣！
http://localhost/#/a
```

3.2 vue history 模式
1. 配置修改
配置文件在 nginx.conf中
 server { 
    # 服務器端口
    listen       80;
    # 服務器名稱
    server_name  localhost;
    # 路徑配置
    location / {
        # 相對路徑配置，基於nginx啟動的位置
        root   dist;
        index  index.html;
        # 需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
        # Nginx知識補充：
        # try_files 指令：
        # try_files $uri $uri/  /index.html;
        # 作用域：server location
        # 語法：try_files file ... uri 或 try_files file ... = code
        # 其作用是按順序檢查本地（服務器）文件是否存在，
        # 返回第一個找到的文件或文件夾（結尾加斜線表示為文件夾），
        # 如果所有的文件或文件夾都找不到，會進行一個內部重定向到最后一個參數。
        # 需要注意的是，只有最后一個參數可以引起一個內部重定向，之前的參數只設置內部URI的指向。
        # 最后一個參數是回退URI且必須存在，否則會出現內部500錯誤。命名的location也可以使用在最后一個參數中。
        # 與rewrite指令不同，如果回退URI不是命名的location那么args不會自動保留，如果你想保留args，則必須明確聲明。
        # 但是其實這官方的demo是有一些需要注意的地方的。
        try_files $uri $uri/ @router;  
    }
    # 對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的文件
    # 因此需要rewrite到index.html中，然后交給路由在處理請求資源
    location @router {
        # last ：相當於Apache里德(L)標記，【表示完成rewrite ！important】【將得到的路徑重新進行一次路徑匹配】，瀏覽器地址欄【URL地址不變】
        # break；本條規則匹配完成后，【終止匹配  ！important】，【不再匹配后面的規則】，瀏覽器地址欄【URL地址不變】 一般不用這個選項！
        # redirect： 返回302臨時重定向，瀏覽器地址【會顯示跳轉后的URL地址】
        # permanent：返回301永久重定向，瀏覽器地址欄【會顯示跳轉后的URL地址】
        # 1.靜態資源，去掉項目名，進行定向 \為轉義， nginx 中的 / 不代表正則，所以不需要轉義
        rewrite (static/.*)$ /$1   redirect;
        # 2.非靜態資源，直接定向index.html
        rewrite ^.*$   /index.html  last;
     }
     # 后端接口，反向代理  
     location ~ /rest {
        #  反向代理
        proxy_pass http://ip:port;
     }
 }
2. 啟動
cd 到目錄,nginx在以下目錄
```
start nginx
```
3. 瀏覽器訪問
```
http://localhost
// 默認會跳到對應的路由，vue-router重定向，可能變成這樣！
http://localhost/a
```

 保留地址以防丟失http://www.wuweigang.com/?id=329