vue多項目nginx部署

項目目的

實現服務端同一域名下部署多個vue項目。

網站目錄結構如：

根/
    ├── index.html
    ├── mms
    └── wap

項目環境

系統平臺：
CentOS Linux release 7.4.1708 (Core)       內核  3.10.0-693.el7.x86_64
nginx version: nginx/1.12.2

排查過程

前端在打包靜態文件的時候，只把assetsPublicPath: '/wap' 修改成對應的子目錄

那麼嘗試nginx各類寫法，均未成功。

只寫這個，所有指向/

location /wap {
                try_files $uri $uri/ /wap/index.html;

錯誤日誌
2018/04/13 08:10:16 [error] 74906#0: *8 open() "/usr/share/nginx/html/static/js/index.b5c514831ef6db6a3e00.js" failed (2: No such file or directory), client: 192.168.10.136, server: _, request: "GET /static/js/index.b5c514831ef6db6a3e00.js HTTP/1.1", host: "192.168.10.247", referrer: "http://192.168.10.247/wap/"

這種寫法，內部500 Internal Server Error

location /wap {
                root /usr/share/nginx/html/wap;
                index  index.html index.htm;
                try_files $uri $uri/ @router;
                }

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

一樣錯誤，所有指向/

location /wap {
                root /usr/share/nginx/html/wap;
                index  index.html index.htm;
                try_files $uri $uri/ @router;
                }

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

錯誤日誌
2018/04/13 08:27:54 [error] 76039#0: *42 open() "/usr/share/nginx/html/static/js/index.e63d3efadf103006619e.js" failed (2: No such file or directory), client: 192.168.10.136, server: _, request: "GET /static/js/index.e63d3efadf103006619e.js HTTP/1.1", host: "192.168.10.247", referrer: "http://192.168.10.247/wap/"

這種寫法，也是內部500 Internal Server Error

location /wap {
                root /usr/share/nginx/html/wap;
                index  index.html index.htm;
                try_files $uri $uri/ /wap/index.html;
                }

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

內部500 Internal Server Error

location /wap {
                root /usr/share/nginx/html/wap;
                index  index.html index.htm;
                try_files $uri $uri/ /wap/index.html;
                }

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

由於我也不懂前端的事情，查了下資料，應該是開發那邊的環境生成的路由有誤。

修改vue生成參數

1. index.html文件修改
    添加 <meta base="/子目錄名/">

2. config/index.js文件修改
    修改 assetsPublicPath: '/子目錄名/'

3.src/router/index.js文件修改
    添加 base: '/子目錄名/'

Nginx配置

location /子目錄名 {
                try_files $uri $uri/ @router;
                }

        location @router  {
                rewrite ^.*$ /子目錄名/index.html last;
                }

成功。

小坑坑，你們注意便可，並非什麼都是運維的問題，更加須要你們一塊兒合做解決問題。這纔是團隊。