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

技术:vue3.2.13

UI框架:element-plus 2.1.1

服务器:腾讯云Centos系统+宝塔面板

Nginx:1.22.1

前提:宝塔面板==》网站PHP项目 已经新建了项目

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

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

csharp 复制代码
    location / {
      try_files $uri $uri/ /index.html;
    }

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

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

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

我的vue.config.js配置如下

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

3.以上处理完成后保存,然后登录页面刷新请求接口

页面刷新正常、接口请求code200 则说明配置成功!

相关推荐
学Linux的语莫8 分钟前
Ansible使用简介和基础使用
linux·运维·服务器·nginx·云计算·ansible
天天进步201513 分钟前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
Onlooker12919 分钟前
云服务器部署WebSocket项目
服务器
学Linux的语莫31 分钟前
搭建服务器VPN,Linux客户端连接WireGuard,Windows客户端连接WireGuard
linux·运维·服务器
疯狂的沙粒33 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
legend_jz36 分钟前
【Linux】线程控制
linux·服务器·开发语言·c++·笔记·学习·学习方法
黑牛先生39 分钟前
【Linux】进程-PCB
linux·运维·服务器
Karoku06644 分钟前
【企业级分布式系统】ELK优化
运维·服务器·数据库·elk·elasticsearch
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
想自律的露西西★2 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5