vue项目在启动时，自动打开浏览器，并且打开地址是自己本地的IP地址

最新推荐文章于 2024-07-08 11:12:46 发布
最新推荐文章于 2024-07-08 11:12:46 发布
阅读量2.3k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17211063/article/details/128869288
版权
通过在config的index.js中设置autoOpenBrowser为true，可以实现Vue项目启动时浏览器自动打开。进一步地，在build/webpack.dev.conf.js的devServer配置下设置useLocalIp为true，确保浏览器打开的是本地IP地址，便于本地开发和调试。
摘要由CSDN通过智能技术生成

第一步：在confing文件夹下面的index.js页面中

module.exports里面加上autoOpenBrowser: true,

这样就设置完成了浏览器自动打开功能

 第二步：设置打开地址是自己本地的IP

        在build下的 webpack.dev.conf.js 文件的 devServer 属性下设置 useLocalIp 为true

 这样就完成了启动vue项目时，浏览器自动打开，并且打开的地址为本地的IP地址

前端-文龙刚
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 - 详细实现微信公众号H5网页内置浏览器中预览下载word文档(doc)、excel表格(xls)、ppt文稿、pdf文档等文件，微信内部直接打开预览和下载到本地教程，安卓苹果手机无差异兼容
王佳斌
07-11 2692
vue2，nuxt2，微信公众号，h5，移动端，网页，网站，vue2微信公众号H5网站，内置浏览器下载文档，如何在微信浏览器中预览office文件，word文档，excel文档，pdf文档，ppt文档，office，vue微信内置浏览器下载文件，下载文件，在微信浏览器里面实现下载任意文件，H5需要在微信浏览器中下载excel文件，实现网页在微信内置浏览器中下载文件详细教程，安卓点击下载会提示打开浏览器，后端返回流文件，如何解决无法下载文件，跳转至浏览器下载文件，发送到电脑微信，安卓，苹果，手机系统，微信H5
vue项目中获取内外网ip的方法
weixin_42255542的博客
12-14 5071
vue项目中获取内外网ip的方法
Vue 自动获取本地ip，并打开浏览器
主要分享大数据相关的知识，如Spark、Hudi
05-29 6593
前言 功能如题，本文参考：https://www.jianshu.com/p/54daac2cc924，目的只是为了把网上查的资料做个笔记~ 以下均为vue cli2 创建的项目 自动打开浏览器 只需要在config/index.js里找到autoOpenBrowser将其设为true即可 获取本地ip 方法一 在config/index.js 顶部添加 const os = require(...
vue项目启动后实现localhost和局域网内ip访问页面
最新发布
2301_78187511的博客
07-08 419
【代码】vue项目启动后实现localhost和局域网内ip访问页面。
vue自动打开浏览器
A2645765158的博客
03-06 337
vue自动打开浏览器
vue项目通过本地IP地址访问，不是localhost
a5252145的博客
08-02 3116
vue项目通过本地IP地址访问，不是localhost 修改package.json中scripts属性，再dev属性下添加：--host 192.168.3.45即可。
vue项目使用ip地址打开
javaScript_want的博客
10-09 930
vue项目中无法使用ip地址打开： 解决方法： 将config目录下index.js中： 改成： 重启项目就可以使用ip地址访问了
vue 启动成功自动进入首页设置（autoOpenBrowser）
zkk1973的博客
07-18 3943
更改vue项目中的config文件夹下面的index.js文件里面的autoOpenBrowser值为true就可以了，表示自动打开浏览器
vue的webpack5自动打开浏览器跳转到0.0.0.0:8080
weixin_45574920的博客
04-02 2722
vue自动打开浏览器跳转到0.0.0.0:8080 修改配置
vue webpack 自动打开页面_vue整合webpack
weixin_42306002的博客
01-14 294
创建项目目录切换到项目目录运行命令 npm init -y 初始化项目npm init -y在跟目录创建 src 目录，在 src 目录创建 index.html 文件和 main.js 文件安装 webpack 所需依赖// 在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开cnpm i webpack -Dcnpm i webpack...
Vue项目通过network的ip地址访问注意事项
Tang__CT的博客
01-22 5508
Vue项目通过network的ip地址访问方法 在config.js文件中的dev中修改host为0.0.0.0 devServer: { // 环境配置 host: '0.0.0.0', port: 8080, https: false, hotOnly: false, disableHostCheck: true, open: false // 配置自动启动浏览器 }, 或者在packag
Vue项目启动自动在浏览器打开
Rovstephanie的博客
03-04 1476
默认情况下，Vue 项目使用的开发服务器通常会在终端中输出访问地址（如 localhost:8080），但并不会自动在浏览器中打开这个地址。
关于vue 启动项目的时候 自动打开 并使用本地ip打开
m0_47408822的博客
07-23 703
当我们创建一个 vue项目 启动项目的时候想让项目自动打开 项目自动打开：再confing文件夹下面的index下面 module.exports里面加上autoOpenBrowser: true,就可以 使用本地id打开的话 再webpack.dev.conf.js下面 devServer.useLocalIp 就可以啦 ...
通过IP地址访问前端Vue项目
2301_78767322的博客
01-16 1189
通过IP地址访问前端Vue项目
vue配置启动项目自动打开浏览器(三种方法)
Billow_lamb的博客
02-24 1万+
vue配置启动项目自动打开浏览器 1.找到项目中的config文件夹内的index.js，里面有一个配置是autoOpenBrowser:false； 设置为true即可(或者全局搜索autoOpenBrowser设置为true) 2.打开package.json找到启动命令npm run dev 跟npm run serve(这两种命令都可以) 后面增加 --open 3.在根目录下新建vue.config.js文件 vue.config.js代码如下 module.exports = { d
通过ip访问前端本地启动的项目
m0_60336681的博客
04-13 843
通过ip访问前端本地启动的项目
vue项目打开地址默认是http://0.0.0.0:8080/的问题解决
m0_64380162的博客
02-25 1243
vue项目打开地址默认是http://0.0.0.0:8080/的问题解决
配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址
热门推荐
qq_41497443的博客
09-14 2万+
配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址 1、首先设置localhost和本地ip访问 在config文件下的index.js文件中，修改host为： host: '0.0.0.0'， 或者在package.json文件下"scripts"的"dev"值后新增–host 0.0.0.0"，即： "dev": "webpack-dev-server --inline --progress --config build/webpack
VUE搭建项目，配置本地IP地址其他人可访问项目（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-06 2519
VUE搭建项目，配置本地IP地址其他人可访问项目
Vue项目主入口配置与浏览器自动打开问题解析
在 Vue.js 开发环境中，配置文件如 `config.dev.autoOpenBrowser` 是为了控制在运行 `npm run dev` 时是否自动打开浏览器预览应用。这个配置通常在 `http-proxy-middleware` 或类似工具中设置，用于处理服务器代理，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值