iT邦幫忙

0

VUE-CLI與XAMPP本地端連線的基本概念

最近剛接觸Vue,發現到用

  • VUE-CLI只要下
npm run serve

就可以連接localhost:8080顯示網頁,

而用

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

想請問各位大大這兩者有什麼差異,
目前在stackoverflow上找到[1][2]

但還是不太懂,
如果用VUE-CLI所創出的專案需要因用到Database及fileZella而載入到Xampp嗎?
還是只單用VUE-CLI就可以完成Xampp所提供的事情,只是需要個別去下載

懇請各位大大解答,感謝

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2019-10-25 04:43:46
最佳解答

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

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

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

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

看更多先前的回應...收起先前的回應...

讓我們先從 npm 是什麼開始說起 (被打

簡單點就好。要再說到npm啥鬼的。他可能會打結。
單純一點就行了。

p39212053 iT邦新手 4 級 ‧ 2019-10-25 09:43:27 檢舉

目前知道npm是nodejs套件管理工具,可以負責下載module以及專案管理/images/emoticon/emoticon13.gif

感謝解答~

dragonH iT邦超人 5 級 ‧ 2019-10-25 10:00:51 檢舉

如果你本身就已經有用Xampp來做你的server應用。
其實是已經沒必要再去運行npm run serve

是說

這樣講他會不會認為 deploy 時

Xampp 跟 npm run serve

挑一個用就好/images/emoticon/emoticon16.gif

p39212053 iT邦新手 4 級 ‧ 2019-10-25 13:12:45 檢舉

這樣講他會不會認為 deploy 時 Xampp 跟 npm run serve 挑一個用就好

目前的想法是一樣用Xampp架server,然後不用vue-cli,只單純引入vue.js /images/emoticon/emoticon13.gif

不知道這理解有沒有錯誤 ....

是的

1
小魚
iT邦大師 1 級 ‧ 2019-10-24 18:44:05

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

不過Debug跟Release還是有差的.

2
dragonH
iT邦超人 5 級 ‧ 2019-10-24 18:44:28

npm run serve

是開發用的環境

他有一些 hot reloading 等..

開發才需要的 plugin

沒有人會用在正式發布

一般 vue 都是 build完 後

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

所以你說的

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

應該是 deploy build 完的東西

或者是 Laravel 的專案

1
froce
iT邦大師 1 級 ‧ 2019-10-25 12:00:27

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

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

我要發表回答

立即登入回答