vue.js 项目 nginx 本地配置
1、nginx conf文件夹中nginx.conf文件：server {
listen 8080;
server_namelocalhost;
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 去请求接口
页:
[1]