vue項目運行時出現(xiàn)It works的問題解決
更新時間：2023年07月26日 10:06:59 作者：chari克里
本文主要介紹了vue項目運行時出現(xiàn)It works的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
問題描述
運行一個vue項目時，一切正常，沒有報錯，但是點開網(wǎng)頁鏈接后，顯示空白頁面，空白頁面上有個It works！如圖所示
問題分析
It works！頁面出現(xiàn)說明vue項目配置正常，但是無法顯示頁面，說明端口傳輸異常，很可能默認端口被別的進程占用，需要更換成閑置端口
問題解決
首先查看項目使用的端口
通過運行地址能夠得知項目使用80端口，接下來需要更改這一端口然后，需要找到設(shè)置端口的文件位置，我的項目中，設(shè)置端口的位置在vite.config.js文件中，其中設(shè)置了server的port，如圖所示
也可以直接在項目中搜索對應的端口，找到設(shè)置端口的位置，如圖所示
將port后的數(shù)字改成一個閑置端口，如圖所示
我將原端口改為了1113，然后保存文件更改，再重新運行項目，可以看到項目運行的地址已經(jīng)改變，如圖所示
此時不再出現(xiàn)it works，而是成功加載頁面
到此這篇關(guān)于vue項目運行時出現(xiàn)It works的問題解決的文章就介紹到這了,更多相關(guān)vue It works內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
誤引用vuex-persistedstate導致用戶信息無法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導致用戶信息無法清除問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+Echart柱狀圖實現(xiàn)疫情數(shù)據(jù)統(tǒng)計
這篇文章主要介紹了在Vue nuxt項目中，如何使用Echart(百度圖表)柱狀圖來實現(xiàn)疫情數(shù)據(jù)統(tǒng)計，感興趣的小伙伴可以跟隨小編一起學習一下2021-12-12
Bootstrap適用于快速搭建簡單網(wǎng)站或Web應用程序的情況，而Vue.js適用于構(gòu)建復雜的單頁面應用程序，根據(jù)您的項目需求和開發(fā)方式，您可以選擇使用Bootstrap、Vue.js或兩者結(jié)合使用，這篇文章主要介紹了vue使用Bootstrap的詳細方法,需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)tab路由切換組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
Vue?Router是Vue.js官方的路由管理器,它主要用于單頁面應用程序中,幫助解決頁面導航、組件復用等問題,下面我們就來看看vue3中路由寫法與傳參方式吧2024-11-11
利用vue + koa2 + mockjs模擬數(shù)據(jù)的方法教程
這篇文章主要給大家介紹了關(guān)于利用vue + koa2 + mockjs模擬數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
這篇文章主要介紹了Vue3中通過emit實現(xiàn)父子組件通信的方法,包括基礎(chǔ)概念、使用方法、配合props實現(xiàn)完整父子通信、在TypeScript中的類型推斷以及注意事項與最佳實踐,需要的朋友可以參考下2025-01-01
文章介紹了在使用Vue腳手架安裝過程中遇到錯誤的解決方法,包括卸載并重新安裝Node.js、使用cnpm安裝Vue CLI、配置全局緩存路徑以及設(shè)置環(huán)境變量等步驟2026-03-03
Vue(element ui)中操作row參數(shù)的使用方式
這篇文章主要介紹了Vue(element ui)中操作row參數(shù)的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要為大家詳細介紹了vue組件tabbar使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11