Nginx 文件配置
-
编辑nginx.conf
vim /usr/local/etc/nginx/nginx.conf
- 修改其中的内容
server {
// 启动后的端口
listen 8080;
// 启动后访问的地址
server_name localhost;
// location可并列设置多个
// 启动后浏览器输入localhost:8080 默认会访问html文件夹中的index.html文件
location / {
// root地址可以更改为本地项目地址
root html;
index index.html index.htm;
}
// 访问项目test1转发地址 下面设置的地址是本地启的服务地址
// 输入localhost:8080/test1/index.html 等于访问http://127.0.0.1:5500/test1/index.html
location /test1/ {
proxy_pass http://127.0.0.1:5500;
}
// 访问项目test2转发地址
location /test2/ {
proxy_pass http://127.0.0.1:5533;
}
// 404页面同样配置在html文件夹中
error_page 404 /404.html;
location = /404.html {
root html;
}
// 其他错误页设置
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
// 配置代理,由于项目是在本地起动的,而我们的request需要请求其他ip地址。
// 如果你的request链接为localhost:8880/api/login?name=12345,最终会代理到 http://192.168.0.0:80/api/login?name=12345
location /api {
proxy_pass http://192.168.0.0:80;
}
// 一般前端不管用vue,还是react等框架,默认都是单页面的,如果项目是多页面的,则需要用到下面的配置。
// 此时你的浏览器的url不是localhost:8880/#/login,而是 localhost:8880/a.html/#/login
// 所以需要将路径中a.html指向具体的html文件夹中的文件,因为默认是index.html
location /a.html {
alias html;
index a.html;
}
location /a.html {
alias html;
index a.html;
}
}