vue-cli 和 express+mongodb結合!

1.其實自動解除vue一來,就一直在想這個問題,問題是:express後台有一個服務是3000連接埠,然後vue-cli又開啟了一個8080連接埠,
那麼怎麼把他們兩個結合在一起呢?

要跨域嗎?

部署到伺服器的時候應該運行這個npm run dev的命令嗎和npm run build的命令嗎????等等一大堆的問題

2.原因在於現在太多的前端工具幫我們做了太多，而我們只學會了打命令，而沒有搞清楚這些命令到底做了些什麼

首先VUE 是一個javascript的前端架構，註定了它是運行在瀏覽器裡的，對伺服器本地沒有任何要求，只要一個靜態檔案伺服器能通過http訪問到其資源檔就足矣。無論你是用apache ,ngnix 就算你要用node 自己實現一個靜態檔案伺服器，也用不了多少行代碼。

npm run dev 是用來在本地開發的時候做調試用的，vue開發的是前端的東西，不是nodejs 服務端程式，按道理講，生產環境裡就不該存在npm，甚至nodejs也不需要（用nodejs來做web靜態服務的除外），樓主通過ssh進入到伺服器裡，再運行npm run dev 來啟動哪是開發機上做的事情。正確的做法很簡單，通過npm run build 把產生的dist檔案夾（不要上傳檔案夾）裡的內容上傳到http伺服器上就可以通過 http來訪問了，開發機上正常，上傳以後 程式出現錯誤不能啟動並執行原因99.99%的可能性是你引用資源的路徑有問題。

3.那麼現在問題來了!

a.我們本地應該怎麼開發呢,兩個連接埠不一樣,這個8080連接埠訪問3000連接埠的資源是不是涉及到了跨域的請求呢?

解決的辦法很簡單,改一下vue-cli項目裡面的config/index.js檔案

dev: { env: require( './dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api' : { target: 'http://localhost:3000', changeOrigin: true } }, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false }

這樣當在前端用axios訪問 '/api' 的時候,就會被代理到 'http://localhost:3000/api',從而獲得需要的資料.

b.當你過五關斬六將忠於將這個項目開發完成了之後,我們如何把它部署到我們的伺服器上面去呢?

首先你在你項目運行 npm run build 這個命令那麼你的項目就會被打包成一個dist目錄,如果是一個靜態沒有與後台產生互動的,那麼你現在就可以點擊這個檔案夾裡面的index.html運行了

npm run build

前端開發完成後,就可以用webpack打包了,注意將config/index.js檔案裡面的productionSourceMap設為false, 不然打包出來檔案很大,最後用express.static中介軟體將webpack打包好的項目目錄'dist'作為express靜態檔案服務的目錄.

app.use(express.static('dist'))

c.前後端分離,就是與將這個產生的dist目錄和express後台結合起來,然後部署到伺服器上面呢,應該怎麼弄呢

1.進入伺服器的/www檔案夾下面然後建立一個檔案夾moive,然後提升這個檔案夾的讀寫權限

 提升許可權:sudo chmod 777  moive

2.在你的項目裡面建立一個ecosystem.json檔案,然後

然後在這個檔案夾下面運行命令(運行這個命令之前呢,我們還需要就是提交更新一下代碼) pm2 deploy ecosystem.json production setup顯示成功之後你就能在伺服器 的那個moive檔案夾下面看到production這個檔案了哦

部署成功之後呢,你這裡就會出現一個production的檔案夾

然後pm2 deploy ecosystem.json production進行pm2託管

項目發布的地址:vuecli.lovezhishu.cn

github地址:https://github.com/zhalice2011/vuecli