先說明一下緣由，因為自己前段時間在實習，實習期間為了參與項目開發，粗略學習了下Vue、Vuex、Vue-Router，大致會一些基礎的。這里也快要做畢業設計了，趁着放假回來的這兩天，學習下Node的相關知識，最主要的是學習了Express這個基於Node的web框架，我自己本身選的畢設題目也是有關Node的，自然而然地想去用Vue和Express來做一個前后端分離的項目，也算是為畢業設計做准備了。下面進入正題。
一、 Vue和Express怎么實現前后端分離呢
在接觸Express的時候，更多的是使用html、ejs、jade這樣的模板來實現的View層頁面開發。首先我沒有萌生直接在views目錄里面，使用.vue后綴文件來代替類似.ejs模板文件的想法。
我首先想到的是，先把后端工程搭建起來，然后再用vue-cli生成前端vue工程，但是兩個工程基礎架構都建好了，但是怎么將其兩者有機地結合在一起呢？
解決思路
之前自己在用Vue做項目的過程中，也是前后端分離的，只不過前端是在一個工程，后端是Java的一個工程，那么想要前后端交互，一般是將前端代碼打包好之后，放到后端工程的某個目錄下。
前端打包：vue-cli用的是webpack打包，運行npm run build打包命令會在根目錄下生成一個dist文件夾，這個文件夾中包含前端的img,css,js文件。
在express中提供靜態資源：在使用express生成器生成的項目工程中，一般會將ejs模板文件放在views文件夾下，然后express有一個內置中間件，可以解決訪問靜態資源的問題。
app.use(express.static('public')) //public是指的放置前端靜態資源的文件夾名稱，如果有不清楚的地方，可以去express官網看看
同樣是訪問靜態資源，那么在express.static()中間件中，寫入vue-cli打包好之后的dist文件夾名稱就行了，這下就可以訪問前端工程下的靜態資源了。
二、前后端分離之后，怎么渲染模板或者頁面
Express+ejs(jade)模式下，呈現視圖模板的話主要是通過ejs(jade)模板渲染的方式，但是Express+Vue模式下，因為Vue是單頁應用，所以Express針對任何路由的處理，都會只返回一個頁面（html方式）。
- Express+ejs(jade)模式
因為接觸Node也比較淺，實際操作的項目很少，所以對於express的原理有些生疏。前兩天我對Express框架做了一個小的復習，大致了解了理論，今天在做Vue+Express的時候，怎么渲染頁面的原理我竟然忘了？？？為Express開發模板引擎，我看了這篇之后，才恍然大悟，后端對路由做處理的時候，會使用res.render('about')來渲染並返回模板。about指的就是views文件夾下的about.ejs模板文件。 - Express+Vue模式
使用Vue開發前端頁面，實際上后端express在對路由做處理的時候，只會返回一個頁面，即前端打包生成后的index.html文件。
// 因為是單頁應用 所有請求都走/dist/index.html
app.get('*', function(req, res) {
const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
res.send(html)
})
這樣前后端分離也做好了，頁面訪問也ok，然后就可以繼續開發前端頁面邏輯及后端路由處理及數據庫操作。