快捷導(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)的名稱

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

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)文章

VueJS全面解析
Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。這篇文章主要介紹了VueJS全面解析的相關(guān)資料,需要的朋友可以參考下
2016-11-11
vue清除動(dòng)態(tài)路由的問(wèn)題記錄
項(xiàng)目中往往都是添加動(dòng)態(tài)路由，如何刪除已經(jīng)添加進(jìn)來(lái)的路由往往被忽視，為此這里做一下記錄，感興趣的朋友跟隨小編一起看看吧
2023-10-10
vue3+vite加載本地js/json文件不能使用require淺析
這篇文章主要給大家介紹了關(guān)于vue3+vite加載本地js/json文件不能使用require的相關(guān)資料,require 是屬于 Webpack 的方法,在v3+vite的項(xiàng)目里面并不適用,需要的朋友可以參考下
2023-07-07
Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
手把手教你Vue3如何封裝組件
vue2和vue3的組件封裝還是有區(qū)別,下面這篇文章主要給大家介紹了關(guān)于Vue3如何封裝組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-02-02
解決VUE自定義拖拽指令時(shí) onmouseup 與 click事件沖突問(wèn)題
這篇文章主要介紹了解決VUE自定義拖拽指令時(shí) onmouseup 與 click事件沖突問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue3.0公共組件自動(dòng)導(dǎo)入的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3.0公共組件自動(dòng)導(dǎo)入的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
Vue3前端適配Markdown格式問(wèn)題及最佳解決方案
Markdown?編輯器作為一種輕量級(jí)文本格式,已被廣泛應(yīng)用于博客、文檔編輯、評(píng)論系統(tǒng)等場(chǎng)景,下面這篇文章主要介紹了Vue3前端適配Markdown格式問(wèn)題及最佳解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-06-06
vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)
這篇文章主要介紹了vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue 保留兩位小數(shù) 不能直接用toFixed(2) 的解決
這篇文章主要介紹了vue 保留兩位小數(shù) 不能直接用toFixed(2) 的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08