這篇文章主要介紹了Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開瀏覽器的多種實(shí)現(xiàn)方法，方法一比較適用于vue3，每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

方法一：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下面對(duì)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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: