快捷導(dǎo)航

vue3項(xiàng)目啟動(dòng)自動(dòng)打開(kāi)瀏覽器以及server配置過(guò)程

更新時(shí)間：2024年03月12日 09:36:14 作者：Celester_best

這篇文章主要介紹了vue3項(xiàng)目啟動(dòng)自動(dòng)打開(kāi)瀏覽器以及server配置過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

項(xiàng)目啟動(dòng)自動(dòng)打開(kāi)瀏覽器

方法一

在package.json文件夾下在dev和build命令后面添加--open，重新執(zhí)行npm run dev命令即可

  "scripts": {
    "dev": "vite --open",
    "build": "vite build --open",
    "preview": "vite preview"
  },

方法二

在vite.config.js文件中配置server

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '127.0.0.1',
    port: '8888',
    open: true,
    https: false
  },
})

server配置的說(shuō)明

  server: {
    host: '127.0.0.1',// 指定服務(wù)器應(yīng)該監(jiān)聽(tīng)哪個(gè) IP 地址
    port: '8888', // 指定開(kāi)發(fā)服務(wù)器端口
    strictPort: false, // 設(shè)為 true 時(shí)若端口已被占用則會(huì)直接退出，而不是嘗試下一個(gè)可用端口
    open: true, // 開(kāi)發(fā)服務(wù)器啟動(dòng)時(shí)，自動(dòng)在瀏覽器中打開(kāi)應(yīng)用程序
    https: false // 是否開(kāi)啟 https
  },

ps:關(guān)于proxy的配置后面會(huì)單獨(dú)進(jìn)行說(shuō)明。

配置server時(shí)的報(bào)錯(cuò)

1、Error: getaddrinfo ENOTFOUNDlocalhost.my.com
at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:71:26)

或者是報(bào)如下錯(cuò)誤：

可以修改hhosts文件，hosts文件的位置：C:\Windows\System32\drivers\etc

可以在hosts文件中配置要訪問(wèn)的名稱(chēng)

然后運(yùn)行項(xiàng)目之后host名稱(chēng)就會(huì)修改為配置的名稱(chēng)

vue2項(xiàng)目啟動(dòng)自動(dòng)打開(kāi)瀏覽器的配置

vue2項(xiàng)目需要在config文件夾下進(jìn)行設(shè)置

設(shè)置方法如下：

autoOpenBrowser: true

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

代碼分析vue中如何配置less
在本篇文章中，我們給大家詳細(xì)講述了vue中如何配置less的詳細(xì)代碼和步驟，有需要的朋友跟著學(xué)習(xí)下。
2018-09-09
vue寫(xiě)一個(gè)全局彈窗組件通過(guò)js調(diào)用的方法
彈窗效果是在Web開(kāi)發(fā)中經(jīng)常用到的一種交互效果,它可以在用戶(hù)點(diǎn)擊某個(gè)按鈕或者觸發(fā)某個(gè)事件時(shí)顯示一個(gè)懸浮框,提供用戶(hù)與頁(yè)面進(jìn)行交互的機(jī)會(huì),這篇文章主要給大家介紹了關(guān)于vue寫(xiě)一個(gè)全局彈窗組件通過(guò)js調(diào)用的方法,需要的朋友可以參考下
2024-06-06
Vuex實(shí)現(xiàn)購(gòu)物車(chē)小功能
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)購(gòu)物車(chē)小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
Vue 組件之間的通信方式詳解
在 Vue.js 中,組件是構(gòu)建應(yīng)用程序的基本單位,然而,當(dāng)你的應(yīng)用程序變得復(fù)雜時(shí),組件之間的通信變得至關(guān)重要,本文將介紹幾種 Vue 組件之間通信的方式,幫助你更好地管理和組織代碼,感興趣的朋友一起看看吧
2024-06-06
前端+接口請(qǐng)求實(shí)現(xiàn)vue動(dòng)態(tài)路由
在Vue應(yīng)用中,結(jié)合前端和后端接口請(qǐng)求實(shí)現(xiàn)動(dòng)態(tài)路由,可根據(jù)用戶(hù)權(quán)限動(dòng)態(tài)生成路由,提高安全性與靈活性,本文就來(lái)介紹一下前端+接口請(qǐng)求實(shí)現(xiàn)vue動(dòng)態(tài)路由,感興趣的可以了解一下
2024-09-09
Vue簡(jiǎn)易注冊(cè)頁(yè)面+發(fā)送驗(yàn)證碼功能的實(shí)現(xiàn)示例
本文主要介紹了Vue簡(jiǎn)易注冊(cè)頁(yè)面+發(fā)送驗(yàn)證碼功能的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
Vuejs2 + Webpack框架里,模擬下載的實(shí)例講解
今天小編就為大家分享一篇Vuejs2 + Webpack框架里,模擬下載的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue中關(guān)于_ob_:observer的處理方式
這篇文章主要介紹了vue中關(guān)于_ob_:observer的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
前端框架學(xué)習(xí)總結(jié)之Angular、React與Vue的比較詳解
這篇文章主要跟大家分享了關(guān)于前端框架中Angular.js、React.js與Vue.js的全方位比較，文章介紹的非常詳細(xì)，對(duì)大家進(jìn)行區(qū)分對(duì)比這三者之間的差異區(qū)別很有幫助，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-03-03
Vue Element前端應(yīng)用開(kāi)發(fā)之前端API接口的封裝
對(duì)整個(gè)系統(tǒng)來(lái)說(shuō)，一般會(huì)有很多業(yè)務(wù)對(duì)象，而每個(gè)業(yè)務(wù)對(duì)象的API接口又有很多。我們這個(gè)VUE+Element 前端應(yīng)用就是針對(duì)ABP框架的業(yè)務(wù)對(duì)象，因此前端的業(yè)務(wù)對(duì)象接口也是比較統(tǒng)一的，那么可以考慮在前端中對(duì)后端API接口調(diào)用進(jìn)行封裝，引入ES6的方式進(jìn)行前端API的抽象簡(jiǎn)化。
2021-05-05