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

这篇具有很好参考价值的文章主要介绍了修改Vue项目运行的IP和端口。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

vite项目怎么更改端口号,Vue,Vscode,vue.js,前端

vite项目怎么更改端口号,Vue,Vscode,vue.js,前端

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

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

修改配置文件

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

vite项目怎么更改端口号,Vue,Vscode,vue.js,前端

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

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

vite项目怎么更改端口号,Vue,Vscode,vue.js,前端

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

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

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

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

2:冒号不要用错了

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

看,直接报错。

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

vite项目怎么更改端口号,Vue,Vscode,vue.js,前端

解决报错

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

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

// 配置devServer
  devServer: {
    host: 'localhost', // 项目运行的ip
    port: 8888, // 项目运行的端口号
  }

配置文件全部代码:

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

测试效果

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

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

vite项目怎么更改端口号,Vue,Vscode,vue.js,前端

完美解决问题!

vite项目怎么更改端口号,Vue,Vscode,vue.js,前端

总结

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

以后遇到其他的配置语法,会持续更新!文章来源地址https://www.toymoban.com/news/detail-780515.html

到了这里,关于修改Vue项目运行的IP和端口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 在vite中运行无法使用外部ip访问

    使用vite创建的vue项目运行时,只能使用localhost(127.0.0.1)访问,如果使用外部ip,提示使用–host参数,可使用npm run dev --host,不起作用,在host后增加0.0.0.0也不起作用。需要运行npx vite --host 0.0.0.0。还有一个办法,就是在vite.config.js中增加配置server:

    2024年02月16日
    浏览(47)
  • CentOS7安装Jenkins(更改默认运行的端口号8080->16060)

    首先修改配置文件 然后注意修改启动配置文件 最后重启Jenkins服务使新端口号生效

    2024年02月10日
    浏览(44)
  • vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”

    前言 我们在搭建vue3项目的时候不可避免的会遇到“代理”、“端口”、“打包名”、“图片压缩”等配置问题,本文逐一讲述该怎么样在vite.config.js中去配置。 一、配置代理端口和代理转发 vite.config.ts添加如下代码 ts.config.json添加如下代码 图片压缩先要引入vite-plugin-imagem

    2024年02月07日
    浏览(82)
  • vite搭建vue3项目本地环境自定义域名及端口配置

    本blog讲述的是vite直接创建的vue3的项目的本地环境自定义域名配置。 windows 首先配置本地的一个域名代理指向。 在windows环境下host文件的位置是 C:WindowsSystem32driversetc 我们需要打开目录下的hosts文件然后在 其中找到127.0.0.1然后在后面追加一行 Mac 在mac系统中我们需要打开终

    2024年02月06日
    浏览(129)
  • vue脚手架创建项目:账号登录(利用element-ui快速开发)(取消eslint强制格式)(修改端口号)

    新手看不懂,老手不用看系列 创建好项目以后,可以利用idea等工具打开项目。 file - open 然后选择创建好项目文件夹,信任该项目 然后打开 .vue 后缀的文件需要下载一个插件 就是把eslint这个相关的配置删除掉(注意保持JSON格式) 点 terminal 打开命令行输入 npm install element-u

    2024年04月28日
    浏览(61)
  • Windows11 开启ssh服务,并更改端口号,设定开机运行,登录后的命令操作等

    起因:因为要利用frp远程Windows系统的桌面,但又不想随时开着frp,所以想通过局域网内的Raspberry Pi4作为跳板,在需要用到Windows系的远程桌面时,从Pi 以SSH登录系统,在命令行下运行 frpc服务,从而可以远程Windows10、11的远程桌面。 1. 先查看windows 有没有ssh服务 以管理员打开

    2024年02月09日
    浏览(86)
  • vue3+vite+element-plus创建项目,修改主题色

    根据官方文档安装依赖 vite.config.js配置 新建一个文修改全局样式的文件 在src下新建styles/element/index.scss文件,内容如下: @forward \\\'element-plus/theme-chalk/src/common/var.scss\\\' with (     $colors: (         \\\'primary\\\': (             //主色             \\\'base\\\':green         )         //修改其他

    2024年02月10日
    浏览(55)
  • vue3之vite创建h5项目1(创建vite项目、配置IP访问项目、配置多环境变量与预览打包生产效果、配置别名)

    初始化项目模块 添加环境变量文件,每个文件写入配置,定义 env 环境变量前面必须加 VITE_ dev环境 test环境 prod环境 在项目根目录下创建 03-1:配置多环境变量之dev环境 .env.development 03-2:配置多环境变量之test环境 .env.test 03-3:配置多环境变量之prod环境 .env.production 03-4 修改

    2024年02月02日
    浏览(83)
  • ssh 修改端口号 一个ip ssh多个主机

    ssh默认端口为22。 通过路由映射,保留一个22端口,其它主机修改端口,可以用一个ip ssh多个主机。 修改端口需修改/etc/ssh/sshd_config /Port 删除前面的#,然后修改端口号,如23 重启ssh 如果有防火墙需端口放行 或 测试下端口通不通 然后路由上添加端口映射。 ssh 主设备 用默认

    2024年02月19日
    浏览(43)
  • 配置Vite获取内网IP(Vue3项目​ts版本获取本机局域网IP地址)

    参考文章:vue项目获取本机局域网IP地址(vue.config.js版本) 在Vite中,没有vue.config.js文件,而是使用vite.config.js(或vite.config.ts,如果项目使用TypeScript)来配置项目; 1.获取 IP 需要借助  os  模块,需要先安装依赖: 2.其次在vite.config.ts中引用模块  3.接着,添加一个获取本机内

    2024年02月05日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包