当前位置: 首页 > news >正文

修改Vue项目运行的IP和端口

前言

我们在使用VsCode启动Vue项目的时候,我发现:默认的端口号好像和tomcat一样,默认都是8080,如果8080被占用了,就会使用8081,8082这样的方式以此类推。

在这里插入图片描述

在这里插入图片描述

那么,我们是否可以像后端一样,通过修改port属性的方式达到修改运行端口的方式呢?

答案肯定是可以的,下面的就分享下是如何做到的:

修改配置文件

找到vue项目的配置文件:vue.config.js

在这里插入图片描述

这个东西吧,站在我后端角度理解,就好像是springboot中的application配置文件,在里面配置一些和项目有关的东西

比如我之前已经配置过一个属性,这要方式语法简单,导致出现各种莫名奇怪的错误

在这里插入图片描述

目前我只用到了一个配置项:

lintOnSave: false // 关闭语法检查 防止不必要的语法报错

这里还是有几个注意事项需要多bb几句的

1:多个配置项之前,需要注意使用逗号隔开

2:冒号不要用错了

如果你觉得直接修改port,那你就想的简单了!

看,直接报错。

ERROR Invalid options in vue.config.js: “port” is not allowed

在这里插入图片描述

解决报错

想要解决这个问题,其实很简单。只需要再配置层devServer。把配置代码写到里面即可:

祈祷我的项目没有bug,给它个吉祥的端口

// 配置devServerdevServer: {host: 'localhost', // 项目运行的ipport: 8888, // 项目运行的端口号}

配置文件全部代码:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,  // 关闭语法检查 防止不必要的语法报错// 配置devServerdevServer: {host: 'localhost', // 项目运行的ipport: 8888, // 项目运行的端口号}
})

测试效果

配置文件修改完之后,一定要记得重启服务,这样才能生效!

可以使用ctrl+c终端终端,重新执行npm run server

在这里插入图片描述

完美解决问题!

在这里插入图片描述

总结

其实还是很简单的。这个vue.config.js和springboot的application配置文件是一个道理,需要修改项目什么东西就直接在里面改。注意语法就好啦!

以后遇到其他的配置语法,会持续更新!

http://www.lryc.cn/news/965.html

相关文章:

  • 【C++提高编程】map/ multimap 容器详解(附测试用例与结果图)
  • laravel操作redis和缓存操作
  • 目标检测论文阅读:GaFPN算法笔记
  • 【转】Generative Pretrained Transformer
  • day34|343. 整数拆分、96.不同的二叉搜索树
  • WeNet - 初识
  • 为什么各个企业都在创建FAQ、常见问题页面?
  • 【React-Router】路由传参,路由嵌套,手动导航,路由文件配置
  • 面向对象分析与设计(OOAD)
  • 数据库调优
  • OpenStack云平台搭建(3) | 部署Glance
  • 软件评测师考试总结
  • 小白系列Vite-Vue3-TypeScript:009-屏幕适配
  • 查找企业微信聊天记录,会话存档有多重要
  • C语言经典编程题100例(1-20)
  • 小白系列Vite-Vue3-TypeScript:008-安装配置mock
  • OnGUI Box 控件||Unity 3D OnGUI 常用控件
  • shiro721——CVE-2019-12422
  • 爬虫JS逆向思路 - - 扣JS(data解密)
  • Android 进阶——Framework 核心之Binder 相关预备理论(一)
  • 【23种设计模式】结构型模式详细介绍
  • 接口自动化实战-postman
  • 前端跨域方案简单总结
  • 【HTML】HTML 表格 ② ( 表头单元格标签 | 表格标题标签 )
  • 常用的辅助类2(StringBuilder、StringBuffer、处理时间相关的类、对象比较器)
  • anaconda下pytorchCPU GUP安装及问题记录
  • 香港中文大学MISC Lab GNN团队: 异质图神经网络研究进展从谱的角度看待(图)对比学习(图自监督学习)
  • C#开发的OpenRA的Enumerable.Concat方法应用
  • 前端知识点总结(自参)
  • [ 靶场环境片 ] kali-linux采用Docker 搭建 pikachu(特别详细)