好程序員web前端培訓學習筆記Vue學習筆記之二，服務端渲染
什麼是服務器端渲染 (SSR)？
Vue.js 是構建客戶端應用程序的框架。默認情況下，可以在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染爲服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最後將這些靜態標記"激活"爲客戶端上完全可交互的應用程序。
服務器渲染的 Vue.js 應用程序也可以被認爲是"同構"或"通用"，因爲應用程序的大部分代碼都可以在服務器和客戶端上運行。
爲什麼使用服務器端渲染 (SSR)？
更好的 SEO，由於搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。
更快的內容到達時間 (time-to-content)，特別是對於緩慢的網絡情況或運行緩慢的設備。
Vue SSR初體驗
.安裝
npm install vue vue-server-renderer --save
.渲染一個 Vue 實例
// 第 1 步：創建一個 Vue 實例const Vue = require('vue')const app = new Vue({
template: <div>Hello World</div>})// 第 2 步：創建一個 rendererconst renderer = require('vue-server-renderer').createRenderer()// 第 3 步：將 Vue 實例渲染爲 HTMLrenderer.renderToString(app).then(html => {
console.log(html)}).catch(err => {
console.error(err)})
Nuxt.js
1.Nuxt.js介紹與安裝
https://zh.nuxtjs.org/guide
npx create-nuxt-app <項目名>
服務端渲染， 解決首屏加載速度， 和 seo問題
//如果出現錯誤 HTMLElement is not define 修改nuxt.config.js 中pluginsplugins: [
// '@/plugins/element-ui', { src: '@/plugins/element-ui', ssr: false}
]
//不要複製 ， 編碼有問題
- Nuxt.js的配置
https://zh.nuxtjs.org/guide/configuration - 路由
Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模塊的路由配置。
(1) 要在頁面之間使用路由，我們建議使用 標籤。 支持activeClass ,tag
(2)
pages/--| user/-----| index.vue-----| one.vue--| index.vue那麼，Nuxt.js 自動生成的路由配置如下：router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}]}
(3)嵌套路由
創建內嵌子路由，你需要添加一個 Vue 文件，同時添加一個與該文件同名的目錄用來存放子視圖組件。
Warning: 別忘了在父組件(.vue文件) 內增加 用於顯示子視圖內容。
pages/--| film/-----| nowplaying.vue-----| comingsoon.vue--| film.vue
（4）重定向
-
nuxt.config.js
router:{extendRoutes (routes, resolve) { routes.push({ path: '/', redirect: '/film' }) }}
-
利用中間件來處理
// 中間件 middle/ redirect.js
export default function({ isHMR, app, store, route, params, error, redirect }) {
if (isHMR) return
// 頁面均放在_lang文件夾下，即lang爲動態路由參數
/*if (!params.lang) { //此寫法會出現路由重定向次數過多的問題return redirect('/' + defaultLocale + '' + route.fullPath)}
*/if(route.fullPath == '/film') { return redirect('/film/nowplaying') }}
router: {middleware: 'redirect' // 即每次路由跳轉會調用該中間件//多箇中間件寫法
// middleware: ['redirect']
}
（5） 動態路由
必須加下劃線 (文件夾也可以加下劃線(多級嵌套)， 文件也可以加下劃線)
pages/--| detail/-----| _id.vue//編程式跳轉 this.$router.push("/detail");
（6） 獲取動態路由參數
asyncData({params}){
console.log(params.id);}
- 視圖
在layout 裏面 寫好default.vue 可以認爲這是根組件的模板了，
所有的組件都加在裏面， 但是有些頁面 可能不一樣，就可以使用 個性化定製頁面。
舉個例子 layouts/template.vue:
<div>這個頁面不需要導航欄</div>
<nuxt/>- 異步數據與資源文件
(1) 如果組件的數據不需要異步獲取或處理，可以直接返回指定的字面對象作爲組件的數據。
export default {
data () {
return { foo: 'bar' }}}
(2)使用 req/res(request/response) 對象
在服務器端調用asyncData時，您可以訪問用戶請求的req和res對象。在當前頁面刷新， 服務端執行此函數從其他頁面跳轉過來，客戶端執行此函數export default {
async asyncData ({ req, res }) {
// 請檢查您是否在服務器端 // 使用 req 和 res if (process.server) { //判斷是否在服務器被調用 //process.client 判斷是否在客戶端被調用 return { host: req.headers.host }
}
return {}}}
(3)錯誤處理
Nuxt.js 在上下文對象context中提供了一個 error(params) 方法，
你可以通過調用該方法來顯示錯誤信息頁面。params.statusCode 可用於指定服務端返回的請求狀態碼。
以返回 Promise 的方式舉個例子：
export default {
asyncData ({ params, error }) {
return axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
return { title: res.data.title }
})
.catch((e) => {
error({ statusCode: 404, message: 'Post not found' })
})}}
(4)反向代理的配置 （重啓服務器）
npm i @nuxtjs/proxy -D在 nuxt.config.js 配置文件中添加對應的模塊，並設置代理
modules: [
'@nuxtjs/axios', //添加axios '@nuxtjs/proxy' //添加proxy模塊 ],axios: {
proxy: true},
proxy: {
'/api': {
target: 'http://example.com',
pathRewrite: {
'^/api' : '/'
}
}}這樣就配置好了webpack的反向代理。爲了在服務端和客戶端都工作， 需要axios.get((process.server?'https://h5.ele.me':'')+"/restapi/shop......e&terminal=h5").then(res=>{
console.log(res.data)})如果上線了， 需要在node中配置好 http-proxy-middleware 就工作了。
- vuex狀態樹 ( 注意：重啓服務器 )
（1）需要添加 store/index.js 文件，並對外暴露一個 Vuex.Store 新的實例
每次訪問都要返回一個實例， 防止交叉請求狀態污染
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = () => new Vuex.Store({
state: {
counter: 0},
mutations: {
increment (state) {
state.counter++
}}})
（2）fetch 方法用於在渲染頁面前填充應用的狀態樹（store）數據，
與 asyncData 方法類似，不同的是它不會設置組件的數據。
如果頁面組件設置了 fetch 方法，它會在組件每次加載前被調用（在服務端或切換至目標路由之
前）。
export default {
async fetch ({ store, params }) {
let { data } = await axios.get('http://my-api/stars')
store.commit('setStars', data)}}//當然這個異步請求 也可以在actions中做異步
await store.dispatch('GET_STARS');}}//store/index.jsexport const actions = {
async GET_STARS ({ commit }) {
const { data } = await axios.get('http://my-api/stars')
commit('SET_STARS', data)}}
（3）vuex 還是非父子以及狀態快照的作用
// 訪問 還是 通過 this.$store.state.listasync fetch({store}){
if(store.state.list.length){
return;
}
//數據請求部分 }