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