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）vue路由配置（加上竟然访问路由失败404，因为误开了多个nginx服务）
// 这里设置默认入口是dist中的index文件
location / {
try_files $uri $uri/ @router;
index index.html;
}
// 设置Vue路由都指向index.html中
location @router {
rewrite ^.*$ /index.html last;
}
（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;
}
在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 去请求接口
