首页 前端知识 若依Vue Nginx部署相关问题一下午踩坑(页面刷新404、验证码找不到、系统资源404,后端接口404等等)

若依Vue Nginx部署相关问题一下午踩坑(页面刷新404、验证码找不到、系统资源404,后端接口404等等)

2024-07-24 23:07:25 前端知识 前端哥 566 511 我要收藏

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什么的,照样报错。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14284.html
标签
nginx
评论
发布的文章

JSON File 格式详解

2024-08-08 23:08:37

nvm安装node一直没有npm

2024-08-08 23:08:25

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!