Vue項(xiàng)目啟動(dòng)后如何在瀏覽器自動(dòng)打開
更新時(shí)間：2024年08月27日 10:35:37 作者：前端的小白
這篇文章主要介紹了Vue項(xiàng)目啟動(dòng)后如何在瀏覽器自動(dòng)打開問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue項(xiàng)目啟動(dòng)后在瀏覽器自動(dòng)打開
想要實(shí)現(xiàn) Vue 項(xiàng)目在瀏覽器自動(dòng)打開，只需要幾步簡單的操作就可以實(shí)現(xiàn)了。
我這里是使用了Vue3.x的腳手架創(chuàng)建的項(xiàng)目，項(xiàng)目的目錄架構(gòu)你們有可能是和你們的不太一樣，但是道理是這樣子的道理。
其他話不多說，直接上步驟安排。
1.找到Vue項(xiàng)目的package.json文件
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},在 scripts 代碼塊的 server 的后面加上 --open ，然后重新啟動(dòng)項(xiàng)目。
做到這里的時(shí)候其實(shí)有些人的項(xiàng)目是可以直接在瀏覽器啟動(dòng)的，但是我的不可以的，會(huì)遇到無法訪問網(wǎng)站的問題。
后來我又找了一下，是還需要配置第二步的 。
2.找到vue.config.js文件
沒有這個(gè)文件的話要自己創(chuàng)建一個(gè)，然后在里面加上如下的代碼段
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{ //用于開發(fā)環(huán)境
host: 'localhost',
port: 8080,
}
})然后重新啟動(dòng)項(xiàng)目，就可以在瀏覽器自動(dòng)打開了。兄弟們，是不是挺簡單的。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
文章介紹了使用JavaScript判斷圖片和PDF是否可以預(yù)覽的方法,對(duì)于圖片,通過創(chuàng)建Image對(duì)象并監(jiān)聽其load和error事件來判斷；對(duì)于PDF,則通過發(fā)送HTTP請(qǐng)求并檢查響應(yīng)類型為blob來判斷,需要的朋友可以參考下2026-04-04
前端如何調(diào)用Go語言后端接口(HTML?+?JS?&?Vue)
這篇文章主要介紹了前端如何調(diào)用Go語言后端接口(HTML?+?JS?&?Vue)的相關(guān)資料,文中通過代碼還討論了跨域問題的解決方法,并對(duì)比了HTML+JS和Vue的不同適用場景,需要的朋友可以參考下2026-01-01
vue實(shí)現(xiàn)修改標(biāo)簽中的內(nèi)容:id class style
這篇文章主要介紹了vue實(shí)現(xiàn)修改標(biāo)簽中的內(nèi)容：id class style，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
文章介紹了vue中向子組件傳值并允許修改的機(jī)制,通過defineModel實(shí)現(xiàn)雙向綁定,它返回一個(gè)ref,并且可以配置底層prop的選項(xiàng),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2025-01-01
npm?install安裝報(bào)錯(cuò)的幾種常見情況
當(dāng)你跑起一個(gè)項(xiàng)目的時(shí)候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于npm?install安裝報(bào)錯(cuò)的幾種常見情況,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue路由傳參-如何使用encodeURI加密參數(shù)
這篇文章主要介紹了vue路由傳參-如何使用encodeURI加密參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue表單組件進(jìn)階之如何打造屬于你的自定義v-model
在Vue中自定義組件是一個(gè)強(qiáng)大的功能,它允許你將可重用的代碼封裝成獨(dú)立的模塊,從而提高開發(fā)效率和代碼的可維護(hù)性,這篇文章主要介紹了Vue表單組件進(jìn)階之如何打造屬于你的自定義v-model的相關(guān)資料,需要的朋友可以參考下2025-11-11
這篇文章主要介紹了vue操作dom并為dom增加點(diǎn)擊事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
本文主要介紹Vue.js中過濾器和自定義指令相關(guān)的知識(shí)點(diǎn)，包括過濾器的定義方式，和使用方法，以及自定義指令的概念和注冊(cè)方式。2021-05-05
這篇文章主要介紹了Vue?全部生命周期組件梳理整理，在創(chuàng)建組件之前使用；在實(shí)例初始化之后,進(jìn)行數(shù)據(jù)偵聽和事件，偵聽器的配置之前同步調(diào)用2022-06-06