Vue 项目运行完成后自动打开浏览器的方法汇总
更新时间：2022年02月22日 10:06:30 作者：qq_22841387
这篇文章主要介绍了Vue 项目运行完成后自动打开浏览器的多种实现方法，方法一比较适用于vue3，每种方法通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
方法一：package.json（适用于vue3）
在文件中找到scripts–serve，在后面添加
--open
方法二：vue.config.js
该方法适用于 有vue.config.js的项目
找到vue.config.js文件，找到devServer，添加下面代码
open : true
方法三：插件+webpack
该方法存在局限性，仅适用于当前只运行一个项目
因为会默认打开
8080端口的项目（其实按道理来说是可以做到动态的，因为vue在检测到8080端口被占用后会自增一）
在
config--->index.js下面对port的定义应该是可被更改的port: 8080 // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
所以我尝试了
new OpenBrowserPlugin({url: `http://localhost:${process.env.PORT || config.dev.port}/`})
和
new OpenBrowserPlugin({url: `http://localhost:${PORT || config.dev.port}/`}但是都没有效果，挖个坑在这里吧！！！
输入下方指令安装插件
cnpm i open-browser-webpack-plugin --save
找到项目 中的 build—>webpack.dev.conf.js
在上方先定义一个变量
const OpenBrowserPlugin = require(‘open-browser-webpack-plugin')
再找到plugins
new OpenBrowserPlugin({ url: ‘http://localhost:8088/' }) 
到此这篇关于Vue 项目运行完成后自动打开浏览器的方法汇总的文章就介绍到这了,更多相关Vue 项目自动打开浏览器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Vue3 的响应式和以前有什么区别,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
组件封装是为了复用,换成大白话就是,同样的事情我不想做第二遍,节省出来的时间用来看动漫不香吗,下面这篇文章主要给大家介绍了关于vue封装TabBar组件的完整步骤,需要的朋友可以参考下2021-10-10
Vue中使用addEventListener添加事件、removeEventListener移除事件的示例详解
最近在项目中需要用到addEventListener监听滚动条滚动的高度，所以就研究了一下在vue中是怎么进行事件监听的，添加事件和移除事件结合示例代码给大家介绍的非常详细，需要的朋友参考下吧2022-12-12
这篇文章主要介绍了Vue之创建项目及目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
Vue.2.0.5实现Class 与 Style 绑定的实例
本篇文章主要介绍了Vue.2.0.5实现Class 与 Style 绑定的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家介绍了页面tooltip组件的限制工具函数使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
Vue-Router提供了hash模式和history模式两种路由模式,hash模式URL带#,支持低版本IE,history模式URL不带#,需要服务器支持2025-01-01
这篇文章主要介绍了如何在项目中使用JSON动画组件,包括创建目录结构、下载JSON文件、编写自定义组件代码以及组件的使用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了vue遮罩层如何阻止滚动，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
最新评论