尚医通学习笔记 Day13--整合Nuxt后页面无法显示后端无错，前端报404请求路径出问题

最新推荐文章于 2023-09-15 18:13:38 发布
最新推荐文章于 2023-09-15 18:13:38 发布
阅读量1k 收藏 4
点赞数
文章标签： 网关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GTWZeus/article/details/117252550
版权

在前端一顿npm install后，再次启动项目时去访问结果：

在这里插入图片描述

首先分析问题

  1. 404导致的原因可能是路径不对，我们先去比对一下api中的路径在这里插入图片描述再和后端的方法名对比是否一直
  2. 检查一下后端启动的时是否报错，例如：mongoDB未正常启动，nacos没启动等等
  3. 再单独测试该方法是否能够行得通，在这里插入图片描述
    如果一切正常那么：

前端中的Axios请求路径和网关SpringgateWay网关是否一致，一定要仔细检查！我的问题就出现在这里

在这里插入图片描述视频中老师是使用80 端口，但是我后端的网关地址前端一直也是使用8088然后直接将前端代码引入后没有检查utils下的request.js文件

在这里插入图片描述
而它默认是localhost是80，将其改为8088（自己网关的端口号）

在这里插入图片描述

问题解决
在这里插入图片描述

GTW_Zeus
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
尚硅谷微服务尚医通前端npm报错
weixin_49437670的博客
04-16 1180
尚硅谷微服务尚医通前端npm报错 解决办法:不需要降低npm版本，办法如下 这里需要使用到cnpm： 1.导入下载好到的项目 2.安装cnpm： npm install cnpm -g 3.安装 node-sass： cnpm install node-sass 4.继续安装：cnpm i node-sass -D 5.删除项目中出现的 node_modules文件夹 6.根据package.json重新安装依赖： cnpm install 7.在开发环境中启动项目：npm run dev ...
Nuxt.js开发中遇到问题汇总（更新中）
JalonDeveloper的博客
11-19 581
nuxt.config.js相关设定 axios参数设定 browserBaseURL的设定 问题描述：在componet中调用axios进行http-get请求时，url的host地址错误，无法获取后端api中的数据 解析：主页中利用asyncData函数内利用axios http-get从后端API中获取数据时host是baseURL中设定的值，而在component中利用async 函数中利用axios http-get从后端API中获取数据时（比如通过点击页面中按钮进行数据请求），利用的是br
尚医通学习笔记Day15--SyntaxError页面空白
GTW、Zeus的博客
05-27 202
出现的页面如图所示 前端页面报错 原因是：其实就是少启动了一个服务罢了 问题就解决了！
nuxt3 图片本地显示，打包后不显示踩坑
rojie0的博客
06-13 1251
1.静态文件根目录为 public，在根目录下新建 img文件夹。
Day111.尚医通：集成NUXT框架、前台页面首页数据、医院详情页
a111042555的博客
07-26 981
尚医通
nuxt-x-strapi:Nuxt前端和Strapi后端
05-13
Nuxt x Strapi描述这是Strapi后端和Nuxt前端的启动器/模板。安装有两个单独的文件夹， backend和frontend您必须分别运行yarn install才能启动并运行它们。前端该应用程序的前端是使用Nuxt.js构建的yarn dev人员开始...
nuxt-strapi-blog:带有Nuxt前端和Strapi CMS后端的自定义博客
05-16
使用Nuxt.js前端和Strapi.js CMS后端创建博客的教程 此存储库包含使用和构建的演示博客的代码。 安装Strapi.js 从 安装Strapi： $ npm install strapi@alpha -g 创建一个项目： $ strapi new myProject $ > ...
eslint-plugin-nuxt:用于Nuxt.js的ESLint插件[WIP]
05-11
eslint-plugin-nuxt :sparkles: 用于Nuxt.js的ESLint插件 :optical_disk: 安装 您首先需要安装 ： $ npm i eslint --save-dev success Saved 1 new dependencies 接下来，安装eslint-plugin-nuxt ： $ npm ...
nuxt-chat-app：使用nuxtjs socket.io构建的实时聊天应用程序的前端。 在https：github.combinbyteschat-app-server上检查后端
02-04
聊天应用程序前端使用nuxt.js构建的聊天应用程序的前端构建设置# install dependencies$ npm install # Or yarn install# copy and setup .envcp .env.example .env# serve with hot reload at localhost:3000# ...
nuxt-winston-log:Nuxt模块，用于使用Winston记录SSR错误
05-01
nuxt-winston-log 向您的Nuxt应用程序添加winston / logging的模块。 该模块仅支持以通用模式运行的Nuxt应用程序。 默认情况下，捕获以下事件： error级别：通过Nuxt中间件挂钩的SSR错误 info级别：Nuxt应用程序...
Vue在 Nuxt.js 中重定向 404 页面的方法
10-17
主要介绍了Vue在 Nuxt.js 中重定向 404 页面的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
nuxt.js跳转路由没问题，刷新后404,NuxtLink跳转刷新后404
最新发布
qbbhgn的博客
09-15 1376
在Nuxt.js中，当你使用路由跳转到某个页面后，刷新页面可能会导致404错误的问题。这是因为Nuxt.js默认使用了服务器端渲染（SSR），而刷新页面时，服务器无法正确地处理路由请求。
nuxt中router全局导航beforeEach中next带参调用page not found问题（未常规解决）
qq_41841298的博客
02-20 8937
    今天在做nuxt项目时遇到一个很郁闷的问题，在做权限控制时需要注册一个router的全局导航beforeEach，简单讲一下步骤： 1.在nuxt的plugins目录中编写插件 // plugins/route.js export default ({app})=>{ var token = app.store.getters.genToken // 判断是否有token，...
NUXT3项目中使用element-plus的el-dialog组件无法正常显隐
EStringDoggi的博客
05-27 1942
NUXT3项目中使用element-plus（element+）的el-dialog组件无法正常显隐 根据官方的指引使用v-model绑定一个布尔值 const dialogVisible = ref(false) bug现象：变更这个布尔值发现弹窗无法显示 dialogVisible.value = true 解决：nuxt是服务端渲染框架，使用client-only标签使该组件仅在客户端渲染 <client-only> <el-dialog v-model="dialogVisi
Nuxt 常见问题与解决方案
Lisunlight的博客
09-08 3866
nuxt常见问题，环境搭建，使用技巧
Nuxt.js 的详细使用以及踩的坑
热门推荐
空晓天
09-28 1万+
Nuxt.js 的使用 安装 1、nuxt.js 基于 vue 因此使用 vue 进行项目创建，nuxt.js 官方提供一个模板，我们就以这个模板进行 nuxt 项目的创建。其创建代码为： vue init nuxt-community/starter-template '你的项目名称' 回车之后会进行模板下载，务必联网； 模板下载好之后，会让你填写一些基本信息，可以直接回车选择默认就好，如下图： 模板的目录结构如下： node_modules 文件夹是需要我们安装依赖之后才有的； 2、安装依赖 进入
nuxt.js中使用vue-cropper实现图片裁剪
zhanghaoran
04-08 4337
最近我司一项目，在个人中心页面上需用户上传个性传封面图（类似知乎个人主页上部），用户上传图片大小不一，且封面图大小为1000px*240px;这就需要在用户上传的时候对图片进行合适大小裁剪。 大概思路： 用户上传图片时 判断图片尺寸大小，宽高不能小于1200px240；小于这个尺寸将无法完美裁剪。 将图片转化为base64格式，即时回显图片和不浪费服务器资源。 这两步完成后，将进入到vue-c...
nuxt打包路劲问题_Nuxt史上最全讲解 第一章
weixin_39765625的博客
11-21 622
前言Nuxt是Vue上的SSR,也就是服务端渲染应用框架，可在很大程度上解决当前SPA和CSR的首页加载慢，不利于SEO的问题。本文就将详细介绍Nuxt的使用以及相关概念，并且实战一个Demo来方便读者理解。1.1 SSR首先介绍几个概念:SSR(Server Side Rendering) ，意味服务端渲染。但是SSR 分为两大阶段，第一阶段是在Ajax还没有发展之前，网页基本上都是服...
NUXT开启SSR后，docker打包不生成dist文件导致页面无法访问。
weixin_39651562的博客
03-27 593
如果你是使用的yarn包管理，nuxt+ssr后，docker中的的yarn版本要切换至1.22.4才能成功生成dist文件。
vur-nuxt this.$router.push跳转页面后并刷新页面
08-19
在 Vue.js 的 Nuxt.js 框架中，使用 `this.$router.push` 进行页面跳转后，会直接刷新页面。Nuxt.js 是一个基于 Vue.js 的服务端渲染框架，它的路由跳转默认是通过客户端路由实现的，不会刷新整个页面。 如果你希望...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值