vue3部署宝塔后请求接口404以及刷新页面404的问题解决方案

最新推荐文章于 2024-05-20 18:08:09 发布

鱼干～

最新推荐文章于 2024-05-20 18:08:09 发布

阅读量2.9k

点赞数 2

文章标签： vue.js 服务器 nginx

本文链接：https://blog.csdn.net/weixin_43861689/article/details/132118103

版权

技术：vue3.2.13
UI框架:element-plus 2.1.1
服务器：腾讯云Centos系统+宝塔面板
Nginx:1.22.1

前提：宝塔面板==》网站PHP项目已经新建了项目
在这里插入图片描述

1.处理vue页面刷新报错404

在这里插入图片描述
如上图，在PHP网站==》设置==》配置文件，新增如下代码可解决刷新报错页面404的问题

    location / {
      try_files $uri $uri/ /index.html;
    }

2.处理vue页面请求接口报错404的问题

在这里插入图片描述

如上图，在PHP网站==》设置==》配置文件，新增如下代码可解决刷新报错页面404的问题

// 这里做完记录贴实例，只写一个，实际上项目proxy里几个代理，则写几个
location ^~/blogApi/ {
    proxy_pass http://localhost:5009/;
}

我的vue.config.js配置如下
在这里插入图片描述

// 这里做完记录贴实例，只写一个，实际上项目proxy里几个代理，则写几个
 "/blogApi": {
        target: process.env.VUE_APP_API_BASE_URL,
        changeOrigin: true, // 是否跨域
        secure: false, // 如果是https接口，需要配置这个参数
        pathRewrite: {
          "^/blogApi": "",
        },
      },