Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開瀏覽器的方法匯總
方法一：package.json（適用于vue3）
在文件中找到scripts–serve，在后面添加
--open
方法二：vue.config.js
該方法適用于 有vue.config.js的項(xiàng)目
找到vue.config.js文件，找到devServer，添加下面代碼
open : true
方法三：插件+webpack
該方法存在局限性，僅適用于當(dāng)前只運(yùn)行一個(gè)項(xiàng)目
因?yàn)闀?huì)默認(rèn)打開
8080端口的項(xiàng)目（其實(shí)按道理來說是可以做到動(dòng)態(tài)的，因?yàn)関ue在檢測到8080端口被占用后會(huì)自增一）
在
config--->index.js下面對port的定義應(yīng)該是可被更改的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}/`}但是都沒有效果，挖個(gè)坑在這里吧?。?！
輸入下方指令安裝插件
cnpm i open-browser-webpack-plugin --save
找到項(xiàng)目 中的 build—>webpack.dev.conf.js
在上方先定義一個(gè)變量
const OpenBrowserPlugin = require(‘open-browser-webpack-plugin')
再找到plugins
new OpenBrowserPlugin({ url: ‘http://localhost:8088/' }) 
到此這篇關(guān)于Vue 項(xiàng)目運(yùn)行完成后自動(dòng)打開瀏覽器的方法匯總的文章就介紹到這了,更多相關(guān)Vue 項(xiàng)目自動(dòng)打開瀏覽器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3 的響應(yīng)式和以前有什么區(qū)別，Proxy 無敵？
這篇文章主要介紹了Vue3 的響應(yīng)式和以前有什么區(qū)別,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
組件封裝是為了復(fù)用,換成大白話就是,同樣的事情我不想做第二遍,節(jié)省出來的時(shí)間用來看動(dòng)漫不香嗎,下面這篇文章主要給大家介紹了關(guān)于vue封裝TabBar組件的完整步驟,需要的朋友可以參考下2021-10-10
Vue中使用addEventListener添加事件、removeEventListener移除事件的示例詳解
最近在項(xiàng)目中需要用到addEventListener監(jiān)聽滾動(dòng)條滾動(dòng)的高度，所以就研究了一下在vue中是怎么進(jìn)行事件監(jiān)聽的，添加事件和移除事件結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-12-12
這篇文章主要介紹了Vue之創(chuàng)建項(xiàng)目及目錄方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue.2.0.5實(shí)現(xiàn)Class 與 Style 綁定的實(shí)例
本篇文章主要介紹了Vue.2.0.5實(shí)現(xiàn)Class 與 Style 綁定的實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家介紹了頁面tooltip組件的限制工具函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Vue-Router提供了hash模式和history模式兩種路由模式,hash模式URL帶#,支持低版本IE,history模式URL不帶#,需要服務(wù)器支持2025-01-01
uniapp中使用lottie實(shí)現(xiàn)JSON動(dòng)畫的操作步驟
這篇文章主要介紹了如何在項(xiàng)目中使用JSON動(dòng)畫組件,包括創(chuàng)建目錄結(jié)構(gòu)、下載JSON文件、編寫自定義組件代碼以及組件的使用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue遮罩層如何阻止?jié)L動(dòng)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue+element實(shí)現(xiàn)打印頁面功能
這篇文章主要介紹了vue+element實(shí)現(xiàn)打印頁面功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05