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 去请求接口