【背景】

昨晚把專案傳到github，然後想把DEMO地址放出來。

打包時發現路由傳值的頁面配置錯誤，css位置錯誤。

打包搞了感覺有點麻煩，不如直接在伺服器上裝個nodejs環境，然後npm run dev，執行專案即可。

然後，我的故事開始了......

【經歷】

首先，我通過yum安裝了nodejs，配好了Node的ftp資料夾。

上傳執行，成功！

然而，到公網123.123.123:8080，卻無法訪問。

我忽然想到防火牆埠、騰訊雲的安全組沒開，設定後仍無法開啟。

後來查資料，我需要配置專案conf/index.js dev-host，把host改為0.0.0.0.

然而我檢查我到專案並沒有conf資料夾。

猛然想到自己這個專案是vue init webpack-simple xxx建立的，於是只好重建專案。

接下來，配置package.json的dependencies（執行依賴），寫上我需要的axios、QS、element等庫。

把src資料夾複製過來，然後執行npm run dev。

結果又報錯：

!!vue-style-loader!css-loader.......很長很長.......

檢視原因，原來是開發依賴少了倆包。

npm intall sass-loader --save;  npm intall node-sass --save;

專案執行成功！然而我進入主頁後白屏。控制檯列印：

jPlayer裡是這樣寫的：$.fn.jPlayer.....

通過搜尋，有老外說可能$損壞，需要把jplayer包起來做個匿名函式。

(function ( $ ) { 
    // put jplayer.js code here   
}( jQuery ));

嘗試後，控制檯又說說找不到jQuery 了！

然後我又重新嘗試了各種方法，搜了各種VUE匯入JQuery外掛的方法。

能搜到的全試過了，重置專案好幾遍，然而仍然報錯。

我一度懷疑，要不去社群提問/找有償幫助下算了。

就快放棄的時候，突然想到，我之前專案裡都是import './js/jPlayer'，這麼引入的外掛。（執行一直沒有問題）

要不通過cnpm install jplayer裝下試試？

重新執行終於成功了。美中不足是部分css顯示錯誤，但問題不大。

【尾聲】

我去翻了下node_modules裡的jplayer程式碼，發現兩個檔案是一模一樣的。。。

這次經歷提醒我。開發webpack，就儘量用cnpm install安裝第三方外掛。

儘量用vue init webpack XXX建立專案。

專案完成時候學好打包。本來想圖個方便，結果碰上好多坑。。

好了，就寫到這兒了，一直沒心情吃飯餓死我了