HBuilderX运行时报404错误解决

简介: HBuilderX运行时报404错误解决

前言


生活并无完美,与其让生活带来更多的沮丧与抱怨,不如坚持着一份信念,相信通过努力可以让生活变得更好。

一、问题描述


在开发前后端分离的项目中,前端页面使用HBuilderX进行开发,遇到了一种匪夷所思的情况,前一天前端项目运行还正常,到了第二天再使用HBuilderX运行前端项目时就会报404的错误,不仅是昨天的项目,之前写好的项目运行也是404错误,但是不在HBuilderX中就可以正常打开。因此断定是HBuliderX软件本身的问题,重启电脑、重新打开HBuilderX、重新导入项目等方法都没有解决。

image.png

二、解决方案


打开HBuilderX的存放位置,找到plugins文件夹—>找到nodeserver文件夹—>修改server.js文件

image.png

image.png

image.png

image.png

将server.js文件修改为以下内容:

var args = process.argv.splice(2)[0];
var express = require('express');
var app = express();
var argsjson =JSON.parse(args); 
var projects = argsjson.projects;
var port = argsjson.port;
projects.forEach(function (value,index,array) {
  app.use('/'+encodeURI(value.name),express.static(value.path+''));
});
app.get('*', function(req, res){
    res.sendFile( __dirname + "/" + "404.html" );
});
var server = app.listen(port, function () {
  console.log('server start at '+port);
})

总结


当将上面的代码替换了server.js文件中的代码后重新启动HBuilderX时前端项目就可以正常运行了,但是具体是什么原因也不清楚,源文件也不敢完全覆盖,最后是将原本的server.js重命名,新建了一个server.js文件,将代码复制进去。在此做下记录,如果以后再出现这种情况,能以最快的速度解决这样的问题。

相关文章
|
监控 安全 测试技术
如何进行移动应用的测试?
进行移动应用测试,涉及功能验证、兼容性检查、性能测量、用户体验评估、安全审查、自动化测试、真机测试、Beta试用、回归测试及上线后的监控分析,确保质量、稳定性和用户满意度。测试应贯穿开发全程,不断优化。
363 3
|
机器学习/深度学习 编解码 计算机视觉
Transformer又一城 | Swin-Unet:首个纯Transformer的医学图像分割模型解读
Transformer又一城 | Swin-Unet:首个纯Transformer的医学图像分割模型解读
2699 0
u-view使用轮播组件u-swiper不能正常显示
Swiper 轮播图 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
1537 0
u-view使用轮播组件u-swiper不能正常显示
|
移动开发 JavaScript 前端开发
Element Plus for Vue 3 入门教程
Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级,对于第三方组件库来说是一件好事,那些已经修修补补无数次,还无法彻底解决的问题,在这次面向 Vue 3.0 重构时,一次性全部解决。
3987 0
|
分布式计算 Hadoop Shell
|
关系型数据库 MySQL 数据库
同一台电脑安装两个不同版本的mysql。简单暴力有效
这篇文章介绍了在同一台电脑上安装并配置两个不同版本的MySQL数据库的过程,包括修改端口号、配置服务、修改连接端口和测试连接情况,以确保不同版本的MySQL能够正常运行而不相互干扰。
同一台电脑安装两个不同版本的mysql。简单暴力有效
|
缓存 小程序 开发工具
解决微信开发工具的调试器加载错误,从任务栏打开工具可能导致该问题,请不要从任务栏启动工具。 和调试器控制台显示为空,刷新出不来的问题。
解决微信开发工具的调试器加载错误,从任务栏打开工具可能导致该问题,请不要从任务栏启动工具。 和调试器控制台显示为空,刷新出不来的问题。
1963 0
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
|
前端开发 容器
css 【详解】—— 图片底部留有间隙(含解决方案)
css 【详解】—— 图片底部留有间隙(含解决方案)
378 0
ER图和对应关系模式(只写关键)
ER图和对应关系模式(只写关键)
1750 0

热门文章

最新文章