1.首先我是后端,搞前端真是很头疼,我知道的为什么添加这个属性就会标注上
打开package.json 我是拿这个打的包

2.打开vue.config.js 查看 publicPath,我的是这样的。

3.打开router下的index.js

4.然后就是配置Nginx的.conf文件

下好的Nginx只修改了这几个属性
//prod-api 和 dev-api 的配置都需要加,否则会报验证码已失效。
listen 4399;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/dist;
index index.html index.htm;
# 解决f5情况下 资源404
try_files $uri $uri/ /index.html;
expires 7d;
}
location /prod-api/ { #后端访问子路径,项目.env.development中的配置
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8080/; #后端访问接口
}
location /dev-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8080/;
}
有一个注意点是前后端请求全是HTTP格式的,抄过网上所说的修改为https什么的,照样报错。
本文讲述了后端开发者在使用Vue进行前端开发时,如何配置Nginx以代理处理生产(dev-api)和开发(prod-api)环境的API请求,以及遇到的关于HTTP和HTTPS格式问题的解决方案。
&spm=1001.2101.3001.5002&articleId=133930906&d=1&t=3&u=e817d7d33c784013afb27a666c28f931)
450

被折叠的 条评论
为什么被折叠?



