vue.js 項目 nginx 本地配置

1、nginx conf文件夾中nginx.conf文件：

server {
listen 8080;
server_name localhost;

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

root E:/h5fromremote/dist;
index index.html;

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

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

location ~ ^/app[/\w*]*$ {
proxy_pass http://www.ee.rrrr.com;
}

location ~ ^/api[/\w*]*$ {
proxy_pass http://www.ee.rrrr.com;
}

location ~ ^/v {
proxy_pass http://www.ee.rrr.com;
}

}

 

（1）端口號與項目中配置的一致

（2）root 為項目打包后的本地路徑

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

這里設置默認入口是dist中的index文件

靜態文件路徑

（4）動態接口路徑

location ~ ^/app[/\w*]*$ {
proxy_pass http://www.ee.rrrr.com;
}

location ~ ^/api[/\w*]*$ {
proxy_pass http://www.ee.rrrr.com;
}

location ~ ^/v {
proxy_pass http://www.ee.rrr.com;
}

指向  http://www.ee.rrr.com

 

在vue項目中config的index.js中 有如下配置：

proxyTable: {
    '/api': {
        target: 'http://www.ee.rrr.com',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    },
    '/v': {
        target: 'http://www.ee.rrr.com',
        changeOrigin: true,
        pathRewrite: {
            '^/v': '/v'
        }
    },
    '/app': {
        target: 'http://www.ee.rrr.com', 
        changeOrigin: true,
        pathRewrite: {
            '^/app': '/app'
        }
    }
}

2、當訪問請求接口時首先訪問localhost：8080/app/list
   在nginx會被指向

http://www.ee.rrr.com/app/list 去請求接口