vue配置改端口

最新推荐文章于 2025-04-16 20:44:20 发布
最新推荐文章于 2025-04-16 20:44:20 发布
阅读量633 收藏
点赞数 3
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn_HPL/article/details/144929501
版权

个人理解，仅供参考

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

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

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

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

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

Vue 修改端口号
fzy_1939的博客
08-04 1万+
本章主要介绍Vue开发环境修改端口号的几种实现方法，分享给大家，也给大家做一个参考
vue修改vue项目运行端口号的方法
08-29
本篇文章主要介绍了vue修改vue项目运行端口号的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
修改VUE3项目默认端口
最新发布
qq_63901697的博客
04-16 137
文件增加如下代码重启项目即可。
vue修改指定端口
m0_56419249的博客
12-16 2417
vue修改指定端口
Vue项目的创建、运行与端口号修改
qq_51688022的博客
11-25 2160
详细讲解了Vue的安装下载，项目的创建，运行与访问端口号修改
vue如何改修端口号
weixin_44594219的博客
09-05 8986
总结了cli3和cli2创建的vue项目如何修改项目运行后的端口号
面试官必问的十大问题及答案大全，如何修改vue项目运行的端口号，阿里P8架构师
qq_58071132的博客
04-06 1209
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
解决vue中使用proxy配置不同端口和ip接口问题
10-16
本文将详细介绍如何在Vue项目中使用proxy配置不同端口和IP接口的问题解决方法，包括代理配置的基本概念、配置方法以及部署到线上环境的注意事项。 ### Vue项目代理配置基础 在Vue CLI创建的项目中，通常会使用...
Vue修改项目启动端口号方法
10-16
总结来说，修改Vue项目启动端口号主要涉及`package.json`、`build/dev-server.js`和`config/index.js`（或`vue.config.js`）这三个文件的配置。通过以上步骤，你可以根据自己的需求灵活地调整项目启动时使用的端口，...
Vue开发环境中修改端口号的实现方法
10-16
Vue 2.x和Vue 3.x提供了不同的配置方式来修改端口号，下面将详细介绍这两种版本下的具体步骤。 1. **Vue 2.x** 在Vue 2.x中，项目的配置文件位于`config`文件夹下的`index.js`。这个文件包含了开发环境的配置信息...
vue更改端口号
weixin_46092900的博客
11-24 693
更改端口号 在vue.config.js文件中 module.exports={ devServer:"8080" } 在参数中进行更改
vue 修改端口
weixin_34403693的博客
05-28 325
转载于:https://www.cnblogs.com/taochengyong/p/10937190.html
vue默认端口号的更改
weixin_47644419的博客
09-05 2198
【代码】vue默认端口号的更改。
Vue·修改启动端口
qq_43308318的博客
05-27 6252
Vue·修改启动端口 项目根目录下或src目录下新建vue.config.js文件 **注：配置完成保存后，退出重启项目才会生效** 项目启动后会默认加载此配置文件信息 如图： 位置：vue2-manage-v\vue.config.js // 如果改变就需要重启项目 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', outputDir: 'dist
vue项目修改端口号
m0_52592128的博客
04-16 180
vue没有vue.config.js文件，修改端口号
vue3新项目修改端口
weixin_46939404的博客
07-23 1470
vue3新项目修改端口
【 vue 】更改启动端口
CharlynYanyan的博客
02-16 773
项目根目录，创建vue.config.js module.exports = { devServer: { port: 3000, // 端口 }, // lintOnSave: false // 取消 eslint 验证 };
更改Vue应用程序的端口
CyberGenius的博客
09-25 616
通过修改vue.config.js文件中的devServer选项，你可以轻松地配置Vue应用程序的开发服务器端口。在vue.config.js文件中，你可以配置各种Vue应用程序的选项，包括开发服务器的端口。在Vue应用程序的根目录中，你会找到一个名为vue.config.js的文件。保存vue.config.js文件，并重新启动你的Vue应用程序的开发服务器。首先，找到你的Vue应用程序的根目录，并使用你喜欢的代码编辑器打开它。当开发服务器重新启动后，你的Vue应用程序将在新的端口上运行。
宝塔部署前端vue项目怎么改端口
03-23
### 如何在宝塔面板中修改 Vue 前端项目的运行端口 #### 修改 Nginx 配置文件以调整前端项目运行端口 为了使 Vue 项目能够在指定的端口上运行，需要通过编辑 Nginx 的配置文件来实现。具体操作如下： 1. **进入宝塔面板的站点管理页面** 登录到宝塔面板后，找到已经创建好的站点并点击“设置”按钮。 2. **访问 Nginx 配置文件** 在站点设置界面中，选择左侧菜单栏中的“配置文件”，这会打开当前站点对应的 Nginx 配置文件[^1]。 3. **定位监听端口部分** 找到 `server` 块内的 `listen` 指令，默认情况下它可能被设置为 `80` 或其他默认值。如果希望更改运行端口，则需将其更改为所需的自定义端口号。例如： ```nginx listen 9527; ``` 4. **更新反向代理路径（如有必要）** 如果 Vue 应用程序中有 API 请求或其他资源加载需求，还需要确保这些请求能够正确转发至目标服务。可以通过添加或修改 `location` 路径规则完成此目的。例如： ```nginx location /api/ { proxy_pass http://localhost:3000/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } ``` 5. **保存并测试配置** 完成上述修改之后，记得单击右上方的“保存”按钮，并随后点击“检测配置”。如果没有错误提示，则可重启 Nginx 生效新设定。 6. **防火墙开放新增加的端口** 别忘了前往安全选项卡处增加一条放行策略允许外部设备连接新的端口。比如刚才设定了 `9527` ，就在此添加该数值作为入站流量许可项[^3]。 #### 示例代码展示 以下是完整的 Nginx 配置片段供参考： ```nginx server { listen 9527; # 自定义端口 server_name yourdomain.com; root /www/server/nginx/html/vue_project_dist; index index.html; location / { try_files $uri /index.html; } error_page 404 /404.html; location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~ .*\.(js|css)?$ { expires 12h; } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值