vue3修改端口

最新推荐文章于 2025-05-09 16:59:56 发布
原创 最新推荐文章于 2025-05-09 16:59:56 发布 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文将指导您如何更改Vue3项目的默认运行端口。步骤包括定位配置文件，编辑端口设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第一步找到package.json文件

dev修改为：

"dev": "vite --port 8085"

{
  "name": "web",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --port 8085",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.13",
    "@vue/compiler-sfc": "^3.0.4"
  }
}
···
vite-vue3项目使用@别名和自定义端口号以及解决跨域
qq_65142821的博客
03-30 2164
找到 在vite.config.ts里面配置server重启一下服务，看看是否生效。
vue3加载element-plus，修改端口
weixin_43637946的博客
11-23 360
【代码】vue3加载element-plus，修改端口。
Vite + Vue 3 项目中修改默认端口
蜡笔小新星的博客
09-24 1741
此外，如果你在 IDE（如 VSCode）中运行 Vite 服务器，并且之前已经运行过一次并占用了某个端口，那么再次尝试以相同的端口启动时可能会遇到端口冲突的问题。，这意味着你的 Vite 开发服务器将尝试在端口 3001 上启动。如果该端口已被占用，Vite 会尝试使用下一个可用的端口。如果 Vite 服务器启动成功，并且你想要确认它是否正在新的端口上运行，你可以尝试在浏览器中访问。（或者你所设置的任何端口）。
vue3+js Vite多环境端口配置+@别名设置的一次尝试
最新发布
AiElk的博客
05-09 1115
模块系统ESMCommonJS路径基准相对于当前文件 URL相对于当前文件目录。
vue3修改默认端口
2301_76474805的博客
12-05 3871
1.在项目文件夹下找到vite.config.js 如图,添加。
Vue3 更改端口
m0_53574149的博客
02-17 1058
Vue3 更改端口
vue3新项目修改端口
weixin_46939404的博客
07-23 1505
vue3新项目修改端口
vue.4.0 修改默认的端口号
01-20
网络上大部分是在config文件夹下，index.js 里面有个dev 里面的port。...路径为 movie_view\node_modules\@vue\cli-service\lib\options.js 其中的 movie_view 是我的项目文件夹。 启动服务的时候，可以使用 yarn ser
vue修改vue项目运行端口号的方法
08-29
在描述中提到了一个与滚动事件相关的问题，这与修改端口号的主题稍有偏离，但值得讨论一下。在JavaScript中，通常我们使用`e.preventDefault()`来阻止默认的滚动行为。然而，在Vue中，如果你在组件中使用`@scroll....
Vue修改项目启动端口号方法
10-16
本文将详细讲解如何在Vue项目中修改默认的启动端口号，以适应不同开发环境的需求。 首先，Vue项目的配置信息通常分散在`package.json`、`build/dev-server.js`以及`config/index.js`这三个文件中。以下步骤将指导你...
【功能：vue3 + vite 修改默认启动端口】 - 以及相关配置详细解答，刚学习的小伙伴强烈推荐
热门推荐
2302_78387246的博客
04-03 1万+
【功能：vue3 + vite 修改默认启动端口】 - 以及相关配置详细解答，主要涉及到一些修改配置文件这块的，需要了解的朋友可以进来看看，都比较简单
vue3 命令运行窗口暴露网络地址，以及修改端口号
小十七的个人分享博客
07-26 564
这里加上 --host 可以暴露网络地址，再加上 --8080 就可以将端口号修改为8080（修改为其它的当然也可以）一般情况下这里的地址是隐藏的。
Vue3-修改端口号
Dreamlxx的博客
03-14 1万+
方法一 在 package.json 文件中修改 scripts "scripts": { "serve": "vue-cli-service serve --port 80", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, 方法二 在根目录下新建一个vue.config.js文件（和package.json同一目录） ，内容如下 module.exports = { .
vue3中vite启动项目，修改默认端口号
小枫的博客
10-10 930
第二种 启动命令后加 --port 自定义端口号 （npm run dev --port 1234）第一种 项目生成的 vite.config.ts文件中 添加server对象（注释中对象）第三种 package.json 添加 --port 端口号（如下图）
vue项目怎么修改端口号
ONEBEYONDFANS的博客
08-18 2256
vue项目怎么修改端口号
Vue3使用vite，修改默认端口5173
family20102010的博客
01-11 8027
使用vite创建的项目，在项目根目录有个vite.config.js文件，默认文件只有以下内容，其中没有关于IP和端口的信息，默认端口就是5173。
vue3:自定义网页端口号
weixin_46001736的博客
03-12 652
vue3:自定义网页端口号
vite项目自定义端口号
I_am_shy的博客
06-25 1670
注意：如果端口已经被使用，Vite 会自动尝试下一个可用的端口（5174），所以这可能不是开发服务器最终监听的实际端口。在vite.config.js（或vite.config.ts）中插入以下代码即可。指定开发服务器端口。
Vue3 学习笔记
小蒟蒻的博客
11-08 1482
自学vue3的学习笔记，包括了element-plus，axios，pinia等的联合使用，适合新手小白
修改vue3项目端口
03-18
### 更改 Vue 3 项目默认端口的方法 在 Vue 3 项目中，可以通过多种方法来修改项目的默认运行端口。以下是具体实现方式： #### 方法一：通过 `vite.config.js` 配置文件设置端口 对于基于 Vite 的 Vue 3 项目，在根目录下的 `vite.config.js` 文件中可以配置开发服务器的相关参数。例如，添加如下代码以指定端口号[^1]： ```javascript import { defineConfig } from 'vite'; export default defineConfig(({ command }) => { return { server: { host: '0.0.0.0', // 设置主机地址 port: 9091, // 指定启动端口 } }; }); ``` 此方法适用于大多数使用 Vite 构建工具的 Vue 3 项目。 --- #### 方法二：通过 `package.json` 修改脚本命令 另一种常见的做法是在 `package.json` 文件中的 `scripts` 字段里调整启动命令。例如，将 `"dev"` 脚本改为以下形式[^3]: ```json { "scripts": { "dev": "vite --host 0.0.0.0 --port 9091" } } ``` 这种方式可以直接覆盖默认端口设置，并且无需额外创建配置文件。 --- #### 方法三：动态指定端口（临时） 如果不想永久更改端口配置，也可以在每次启动时手动追加端口号作为参数。执行以下命令即可[^3]: ```bash npm run dev -- --port 9091 ``` 这种方法适合于测试不同端口场景或者避免与其他服务冲突的情况。 --- #### 注意事项 - 如果项目依赖的是旧版 Vue CLI 工具链而非 Vite，则需按照传统方式进行端口修改，比如编辑 `vue.config.js` 或者直接在 `package.json` 中增加类似的命令^。 - 对于某些特殊环境（如生产模式），可能还需要考虑 Nginx 反向代理或其他部署方案的影响[^4]^。 综上所述，推荐优先采用 **方法一** 和 **方法二** 来完成端口定制化需求。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值