背景：由于後端程式猿通常對CSS 、JS掌握不是特别好，通常的開發模式，UI把靜态html做好交給程式猿，程式猿開發，把靜态html變成動态的時候經常會有各種樣式錯亂的問題，并且要迎合上級一天三遍樣式需求，是以決定用前後端分離。考慮到網站的推廣，又必須做SEO。前端架構選擇VUE，解決SSR順便選擇了nuxt.js，此為背景。
一、準備工作
1、安裝nodejs
2、安裝vuejs
3、安裝vue-cli
4、安裝nuxt
二、建立nuxt項目并配置
找一個自己喜歡的目錄，作為你的workspace，使用指令建立nuxt項目
1、建立項目
在該目錄下，摁下shift的同時滑鼠右鍵，進入指令行
執行建立指令：vue init nuxt/starter [firstVue] firstVue為項目名
下面會讓确認項目名，項目描述等資訊，因為項目名不支援大寫，是以我又在建立過程中修改了一下，最終如下圖
Paste_Image.png
2、執行install
建立完成後進入該目錄下，執行npm install ，下載下傳所有依賴的東西，此過程根據網絡環境，可能需要幾分鐘，可以喝杯茶上個廁所。如下圖所示
4、運作
用idea自帶的終端指令行，執行npm run dev，等待啟動成功，如果不報錯，通路
http://localhost:3000 ,出現下圖，則項目建立完成 三、配合Axios解決SEO
1、打開index.vue,為了更清洗，保留模闆内容如下
注意：此處的section标簽和container一定要留着不然有的内容會渲染不出來。
可能大家已經注意到此處有個api.js，我的所有接口以及Axios的配置都在這裡面，提供api的統一配置，重點就在這兩個檔案。
1️⃣、index.vue的腳本中的asyncData，該配置為頁面渲染之前調用，渲染頁面時候可以用傳回的資料進行渲染
2️⃣、api.js，多說無益，show code
import axios from 'axios'
import qs from 'qs'
// axios 配置
axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.baseURL = 'https://api.nashi8.com/'
// POST傳參序列化
axios.interceptors.request.use((config) => {
if (config.method === 'post') {
config.data = qs.stringify(config.data)
}
return config
}, (error) => {
return Promise.reject(error)
})
// 傳回狀态判斷
axios.interceptors.response.use((res) => {
if (res.status === 200) {
return res
} else {
return Promise.reject(res)
}
}, (error) => {
return Promise.reject(error)
})
export function fetch (url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data)
})
.catch((error) => {
reject(error)
})
})
}
export default {
/**
* 擷取廣告資訊
*/
getAds (params) {
return fetch('/api/ad/queryADs', params)
},
getAreas (params) {
return fetch('/api/area/getAll', params)
}
}
3、在index中調用getAreas可以在控制台輸出傳回結果。頁面渲染如下
可能這個看着亂糟糟的，看源碼
此時頁面源碼已可以檢視到服務端傳回的資料，至此，SSR問題已OK
oschina源碼位址：
https://gitee.com/chemors/firstVue.git文章位址：
http://mp.weixin.qq.com/s/gXCtkGXLmrfgENNVwxfWMg掃碼關注更多程式猿相關
歡迎騷擾