認真來說的話，其實兩個都是一樣的作用。
全都是web server的應用。

如果你對server這一堆真的一知半解的話。說真的我也不知道該從何說起。
簡單來講。你說的 npm run serve
那一般是為了開發使用的web server。給與不會架server的人使用的。
再加上其內部一些設定都已經預設好了。在教學上可以免除非常多有關server上的教學。

這是為了單純學程式的人，給與單純的環境處理。不需要在忙架server的事。只要單純學程式就好。
當然了，如果你本身就已經有用Xampp來做你的server應用。
其實是已經沒必要再去運行npm run serve

單純一點就可以讓你明白。你只要將你的Xampp中的web連接port改成8080。
你就會發現npm run serve就會啟動不起來。(因為port衝突)

你可能只接觸過前端吧,
如果你用Visual Studio除錯之類的,
也是會開啟網頁啊.
意思差不多吧.
VS的Port還會一直換.

不過Debug跟Release還是有差的.

npm run serve

是開發用的環境

他有一些 hot reloading 等..

開發才需要的 plugin

沒有人會用在正式發布

一般 vue 都是 build完 後

用 nginx 或 xampp(apache) 架一個前端頁面的 server

所以你說的

Xampp直接在網頁上連接localhost/file_dir/file即可顯示網頁

應該是 deploy build 完的東西

或者是 Laravel 的專案

ㄜ...npm dev serve不能有詳細的log、不能簡單的設置response header、沒有WAF、不能自訂路由、重導、重寫.....
（或許可以啦，不過要設定像這種簡單的靜態網頁伺服器不如我乾脆直接去弄台nginx快還安全）

如果你真的覺得npm dev serve可以滿足你的佈屬需求，你可以試試看，我只能幫你祈求電話不會被打爆。XD