vue的webpack5自动打开浏览器跳转到0.0.0.0:8080

最新推荐文章于 2024-07-26 00:31:51 发布
最新推荐文章于 2024-07-26 00:31:51 发布
阅读量2.7k 收藏 16
点赞数 11
分类专栏： vue 文章标签： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45574920/article/details/123925534
版权
本文介绍了如何在Vue项目中，针对webpack5配置自动打开浏览器并跳转到0.0.0.0:8080。无需降级，只需修改vue.config.js文件，找到@vue/cli-service的serve.js，进行相应配置，即可实现自动启动浏览器。
摘要由CSDN通过智能技术生成

vue的webpack5自动打开浏览器跳转到0.0.0.0:8080配置修改

1.降低版本 搜索这个问题大概可以得到这个答案不细说了
2.修改配置 为啥要找呀,这就不得不提一下葛优和姜文老师的让子弹飞了
我用这个版本 你让我降版本谁忍受的了 你行吗？反正我不行
官网 很棒!看了好一会没有
在这里插入图片描述

构建出vue项目后 有这个vue.config.js文件
在这里插入图片描述
去node_modules下找这个目录@vue/cli-service
在这里插入图片描述
接下来进去这个cli-service目录 进入serve.js文件
在这里插入图片描述
如果是webstorm会询问你是否修改 回车就行了
在这里插入图片描述
然后重新启动就行了
记得自动打开浏览器

最低0.47元/天 解锁文章
【vue】devserver及其配置
m0_55070913的博客
06-18 2353
每次改代码都需要重新部署, 或者只改变修改代码行的效果 所以出现了devserver本地服务 为了完成自动编译，webpack提供了几种可选的模式 方式一：webpack watch mode方式二：webpack-dev-server(常用)上面的方式可以监听到文件的变化，但是事实上它本身没有自动刷新浏览器的功能的， 当然我们可以通过vscode使用live-server来完成这样的功能，但是我们希望不使用live-server的情况下，可以具备实时重新加载的功能 步骤： 1、安装npm install
不使用cli脚手架搭建vue项目工程(webpack简单配置)
热门推荐
破鞋何苦阑珊的博客
01-14 1万+
前言   今天介绍一篇关于工程搭建的文章。主要介绍不用cli脚手架搭建一套前端工程，因为每个公司不是用脚手架工具安装一下就能进行开发了，很多时候都是对工程有一定的定制需求，你没有深入的去了解cli脚手架的话，可能会很吃力，所以这块还是需要有一定的深入了解的，内容也不是太复杂，但是你需要掌握一些vue、webpack、nodejs的简单的基本概念和认识，也挺适合初级者阅读，我们学前端的小伙伴其实都...
webpack5 devServer配置默认打开的浏览器方法
weixin_51332452的博客
08-08 881
Webpack5 devserver配置默认浏览器的方法，版本更新，方法和以前不太一样
修改webpack配置使项目运行自动打开浏览器
六耳石猴的博客
08-31 1849
在vue/cli脚手架生成的项目模板下，通常是将vue.config.js文件隐藏，不暴露出来的，可以自己手动创建，如下： 在节点下添加 open: true // 控制是否自动打开浏览器 然后运行 npm run build 或 npm run serve 即可，项目编译完成就会自动打开浏览器 ...
webpack5版本不同，运行的方式也不同
liu250696676的博客
06-28 415
1.使用webpack ./src/main.js ./dist/bundle.js错误解决方案 将上面webpack命令改为webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development，解决 --output-filename：设置要打包的文件目录 --output-path：打包文件放置的文件目录 --mode：告诉程序，在当前目录，我是属于开发状态development .
【webpack】2、webpack插件使用
m0_46661713的博客
09-03 395
在使用了webpack-dev-server后运行项目会启动一个http服务，端口是8080.但是进入服务后显示的是项目的目录结构，这不是我想看到的，此时可以使用html-webpack-plugin插件让服务的默认界面为html界面。使用webpack-dev-server打包时会启动一个http服务器，默认端口是8080。该插件的作用类似于热更新，在不手动打包的情况下可以自动监控代码的改变。所以在html界面中使用的js文件应该是内存中的main.js。
webpack配置
大灰狼的小绵羊哥哥的博客
11-18 1037
前言 本篇文章不只是搭建webpack5的项目，还有个更重要的目的是，为了在搭建过程中了解每个插件，loader的作用，为什么要使用这些东西，这些东西带来了什么。 我为本项目写了一个cli工具：fight-react-cli，想直接看最终结果的同学，安装一下这个cli工具，初始化一个项目就能查看全部的配置。 准备工作 首先我们创建一个项目webpack-demo，然后初始化npm，然后在本地安装webpack和webpack-cli： mkdir webpack-demo cd webpack-
vue-cli4+webpack4+vant搭建前端移动H5通用框架
破鞋何苦阑珊的博客
07-01 5822
vue-cli4+webpack4+vant搭建前端移动H5通用框架(开箱即用) 简介 该框架是基于cli4 + webpack4 + vant + less的移动端H5通用框架，可供快速开发。 在此之前需要了解一下一个移动端H5改包含哪些技术点： 序号 要点 1 cli-4 2 UI框架 vant 3 rem自适应 4 请求拦截封装 5 路由配置 6 登录校验 7 环境变量配置 8 webpack配置(vue.config.js) 9 弹窗封装(由于不同项目
vue 本地服务不能被外部IP访问的完美解决方法
10-17
在开发Vue应用时，我们通常使用`webpack-dev-server`来启动本地服务器进行开发。然而，有时会出现一个问题，即本地服务只能通过localhost访问，而不能通过外部IP（如局域网内的其他设备）进行访问。这可能给团队协作...
配置vue项目启动后自动打开浏览器，出现网址跳转错误问题：网址为http://0.0.0.0:8080/ 的页面可能存在问题，或者已永久移动到新的网址。
m0_56588258的博客
10-07 6530
配置vue项目启动后自动打开浏览器，出现网址跳转错误问题：网址为http://0.0.0.0:8080/ 的页面可能存在问题，或者已永久移动到新的网址。
webpack启动devServer如何直接用IP打开
mutianda的博客
10-08 4592
ps: 在网上很多教程提示把devServer中的host改为：‘0.0.0.0’来进行局域网内ip地址的访问 host: '0.0.0.0', // can be overwritten by process.env.HOST port: 8013, // can be overwritten by process.env.PORT, if port is in use, 删...
webpack-dev-server 配置服务器外部（内网）可以访问
wang_kai_7的博客
01-11 8505
webpack-dev-server官网的说明是：配置host， 如下： 我自己的相关配置如下： // webpack.config.js devServer: { port: 8888, host: '0.0.0.0 } // 命令行中 webpack --host 0.0.0.0 然后发现访问失败，但是访问：localhost:8888和127.0.0.1:888...
Webpack 5 启动和运行指南（二）
最新发布
龙哥盟
07-26 683
本章深入介绍了加载程序及其在 Webpack 中的使用方式。加载程序对于 Webpack 来说是基础，但插件是核心和支柱。本章带您了解了这些主题的主要特点，展示了每个主题的最佳用法以及何时切换使用它们的好时机。然后我们探讨了插件及其使用方式，包括 Babel、自定义插件和加载程序。我们还研究了 API 及其使用方式，特别是那些在 Webpack 中实现更广泛功能的 API，比如 Babel 和 Node API。在下一章中，我们将讨论库和框架。
webpack学习笔记（五）—— webpack-dev-server如何自动打开浏览器
qq_37899792的博客
03-21 3052
在package.josn里面 配置scripts中的dev命令 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" --open: 自动打开浏览器 --port 3000: 指定打开时的端口号 --contentBase src: 打开项目的主页面 --hot: 热更新 给bundle.j...
webpack5 笔记四，开发环境
m0_50823463的博客
12-13 163
配置 devtool 选项，在有错误时浏览器能精确的提示出错误以及位置。使用 watch 脚本执行，之后每次改动文件都会自动重新打包。static 表示把该目录下的文件作为服务器可访问的资源。添加脚本并启动，可以看到自动打开了浏览器并且可以访问。添加 script 脚本，
解决webpack配置时8080端口Cannot GET /问题
hmhmhm0319的博客
05-07 1966
今天在新电脑上配置webpack-dev-server插件， localhost:8080端口进入后，白屏显示Cannot GET / 上网搜索后有人建议config–>index.js中的 assetsPublicPath: '/'改成`assetsPublicPath: ‘./’ （原文：） 但本人试验后未成功 继续找解决方案... 有人建议在根目录中webpack.config.js文件更改，如下所示： module.exports = { mode: "developmen
Vue默认启动项目自动开启浏览器，网址http://0.0.0.0:8080
qq_44535402的博客
09-27 3050
Vue默认启动项目自动开启浏览器，报错：网址http://0.0.0.0:8080
修改vue自动跳转网页到http://0.0.0.0:8080/
qq_50729588的博客
07-22 858
自动跳转网页
vue项目中浏览器自动打开，出现网址0.0.0.0:8080页面错误
m0_64351096的博客
09-21 2592
vue项目中浏览器自动打开，出现网址0.0.0.0:8080页面错误
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值