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 则说明配置成功!

相关推荐
ElasticPDF-新国产PDF编辑器4 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
无名之逆4 小时前
Rust 开发提效神器:lombok-macros 宏库
服务器·开发语言·前端·数据库·后端·python·rust
rainFFrain5 小时前
单例模式与线程安全
linux·运维·服务器·vscode·单例模式
GalaxyPokemon5 小时前
Muduo网络库实现 [九] - EventLoopThread模块
linux·服务器·c++
Billy Qin6 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌6 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
xujiangyan_6 小时前
nginx的反向代理和负载均衡
服务器·网络·nginx
头顶秃成一缕光6 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs6 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
GalaxyPokemon6 小时前
Muduo网络库实现 [十] - EventLoopThreadPool模块
linux·服务器·网络·c++