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