vue项目运行时出现It works的问题解决

 更新时间:2023年07月26日 10:06:59   作者:chari克里  
本文主要介绍了vue项目运行时出现It works的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

问题描述

运行一个vue项目时,一切正常,没有报错,但是点开网页链接后,显示空白页面,空白页面上有个It works!如图所示

问题分析

It works!页面出现说明vue项目配置正常,但是无法显示页面,说明端口传输异常,很可能默认端口被别的进程占用,需要更换成闲置端口

问题解决

首先查看项目使用的端口

通过运行地址能够得知项目使用80端口,接下来需要更改这一端口然后,需要找到设置端口的文件位置,我的项目中,设置端口的位置在vite.config.js文件中,其中设置了server的port,如图所示

也可以直接在项目中搜索对应的端口,找到设置端口的位置,如图所示

将port后的数字改成一个闲置端口,如图所示

我将原端口改为了1113,然后保存文件更改,再重新运行项目,可以看到项目运行的地址已经改变,如图所示

此时不再出现it works,而是成功加载页面

到此这篇关于vue项目运行时出现It works的问题解决的文章就介绍到这了,更多相关vue It works内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue之封装公用变量以及实现方式

    Vue之封装公用变量以及实现方式

    这篇文章主要介绍了Vue之封装公用变量以及实现方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue2过渡标签transition使用动画方式

    Vue2过渡标签transition使用动画方式

    这篇文章主要介绍了Vue2过渡标签transition使用动画方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • VUE实现Studio管理后台之鼠标拖放改变窗口大小

    VUE实现Studio管理后台之鼠标拖放改变窗口大小

    这篇文章主要介绍了VUE实现Studio管理后台之鼠标拖放改变窗口大小 的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的工作或学习具有一定的参考价值,需要的朋友可以参考下
    2020-03-03
  • 解决el-tree数据回显时子节点部分选中父节点都全选中的坑

    解决el-tree数据回显时子节点部分选中父节点都全选中的坑

    本文主要介绍了解决el-tree数据回显时子节点部分选中父节点都全选中的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue使用Luckysheet插件实现excel导入导出

    vue使用Luckysheet插件实现excel导入导出

    本文主要介绍了vue使用Luckysheet插件实现excel导入导出,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-03-03
  • Vue实现星级评价效果实例详解

    Vue实现星级评价效果实例详解

    这篇文章主要介绍了Vue实现星级评价效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,这就是为什么Vue通过watch选项提供了一个更通用的方法,来响应数据的变化,这篇文章主要给大家介绍了关于vue3.0中watch侦听器的相关资料,需要的朋友可以参考下
    2021-10-10
  • 在Vue3中如何更优雅的使用echart图表详解

    在Vue3中如何更优雅的使用echart图表详解

    ECharts是一个强大的画图插件,在vue项目中,我们常常可以引用Echarts来完成完成一些图表的操作,下面这篇文章主要给大家介绍了关于在Vue3中如何更优雅的使用echart图表的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue3中事件处理@click的用法详解

    vue3中事件处理@click的用法详解

    @click指令用于监听元素的点击事件,并在触发时执行相应的处理函数,在Vue3中,事件处理就可以通过@click指令来实现,下面我们就来看看如何在Vue3中处理点击事件吧
    2023-08-08
  • Vue封装DateRangePicker组件流程详细介绍

    Vue封装DateRangePicker组件流程详细介绍

    在后端管理项目中使用vue来进行前端项目的开发,但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的
    2022-11-11

最新评论