vue.js 项目 nginx 本地配置

huangfen2002

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