vue配置改端口

个人理解,仅供参考

1.因为前台vue 和 后台 springboot 端口 默认都是
http://localhost:8080/

所以我需要改一个端口
我这边是改的前台vue的
打开编译器
找到这个文件
在这里插入图片描述
点进去
默认是这样
在这里插入图片描述
插入一段代码

module.exports = {
  devServer: {
    port: 8082
  }
}

完成之后是这样
在这里插入图片描述
然后启动vue可以看到

在这里插入图片描述
这样就是成功了

### 更 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、付费专栏及课程。

余额充值