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

相关推荐
杨凯凡4 分钟前
Linux日志分析:安全运维与故障诊断全解析
linux·运维·服务器
Monly2129 分钟前
vue报错:Loading chunk * failed,vue-router懒加载出错问题。
前端·javascript·vue.js
愚润求学1 小时前
【Linux】进程优先级和进程切换
linux·运维·服务器·c++·笔记
薛定谔的猫21 小时前
Composition API的深入理解与最佳实践
前端·vue.js
parade岁月1 小时前
TypeScript 全局类型声明文件规范性分析与归纳
前端·vue.js·typescript
忧郁的蛋~2 小时前
开发vue项目所需要安装的依赖包
前端·javascript·vue.js
六边形6663 小时前
Vue中的 ref、toRef 和 toRefs 有什么区别
前端·vue.js·面试
没有鸡汤吃不下饭4 小时前
解决vite+vue3运行项目打开页面跳转很慢打不开需要刷新问题:optimized dependencies change. reloading
前端·vue.js·vite
穿条秋裤到处跑4 小时前
前端连接websocket服务报错 Unexpected response code: 301
websocket·网络协议·nginx
群联云防护小杜4 小时前
云服务器被黑客攻击应急响应与加固指南(上)
运维·服务器·人工智能·tcp/ip·自动化·压力测试